With below code I'm trying to click a tag click event from the parent li tag. But it gives me this error:
Why I want to do this:
When I click the PHP PDO link we need to cursor move in to that text not the li tag. I'm trying to fix it using this. But I know we can call that href from the li click event by getting the a href attribute and set it into the window.location.href. But still trying to trigger the a href click event when I click the li tag.
HTML
<li class="tags" style="cursor: pointer;">
<a class="link_em" href="?l=1" id="1">List1</a>
</li>
Jquery:
$('li.tags').on('click', function (e) {
$(this).children('a').click();
return false;
});
Error:
I got this error when I use above code.
Uncaught RangeError: Maximum call stack size exceeded
UI:
/
Edited:
I done this ugly thing, but I am still looking proper solution:
$('li.tags a').on('click', function (e) {
e.stopPropagation();
});
$('li.tags').on('click', function (e) {
window.location.href = $(this).children('a.link_em').attr('href');
e.preventDefault();
});
With below code I'm trying to click a tag click event from the parent li tag. But it gives me this error:
Why I want to do this:
When I click the PHP PDO link we need to cursor move in to that text not the li tag. I'm trying to fix it using this. But I know we can call that href from the li click event by getting the a href attribute and set it into the window.location.href. But still trying to trigger the a href click event when I click the li tag.
HTML
<li class="tags" style="cursor: pointer;">
<a class="link_em" href="?l=1" id="1">List1</a>
</li>
Jquery:
$('li.tags').on('click', function (e) {
$(this).children('a').click();
return false;
});
Error:
I got this error when I use above code.
Uncaught RangeError: Maximum call stack size exceeded
UI:
https://jsfiddle/k92dep45/
Edited:
I done this ugly thing, but I am still looking proper solution:
$('li.tags a').on('click', function (e) {
e.stopPropagation();
});
$('li.tags').on('click', function (e) {
window.location.href = $(this).children('a.link_em').attr('href');
e.preventDefault();
});
false you're stopping the a element's default behaviour (navigating to a different page) and the event propagates to the parent hence the Maximum call stack.... error
– Titus
Commented
Sep 24, 2017 at 9:51
a tag inside li tag with href. But now I want to trigger that href attribute when click the li
– Elshan
Commented
Sep 24, 2017 at 10:12
You can use below version for the above code
$('li.tags').on('click', 'a', function (e) {
// Do your stuff.
e.preventDefault();
window.location.href= thishref;
});
Here the second argument is the children 'a' in the click event of jQuery.
The problem is that you keep calling the same element which leads to the Maximum call stack size exceeded.
Look at the below example.
function foo(){
foo();
}
foo();
In the above code, we are calling foo() again and again and it will also produce the same result.
You need to add event.stopPropagation() on a element and prevent event "bubbling" otherwise you create infinite loop and that is why you get that error.
$('li.tags').on('click', function() {
$(this).children('a').click();
});
$('li.tags a').click(function(e) {
e.stopPropagation()
e.preventDefault() // This is just for demo
console.log($(this).text())
})a {
border: 1px solid black;
}
li {
padding: 50px;
border: 1px solid red;
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="tags" style="cursor: pointer;">
<a class="link_em" href="?l=1" id="1">List1</a>
</li>
</ul>You can do it differently by changing the href of the window to the href stored in your a tag, getted by using this instruction:
$(this).children('a').attr("href");
Try to implement, or run the following code snippet to confirm if its resolving your problem & get the expected render:
$('li.tags').on('click', function (e) {
window.location.href= $(this).children('a').attr("href");
return false;
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="tags" style="cursor: pointer;">
<a class="link_em" href="?l=1" id="1">List1</a>
</li>After rereading the question, I think that OP has over plicated things (as have I obviously). Added a simpler version of Demo 1 labeled Demo 2. And added Demo 3 which is solution that uses no JavaScript/jQuery just CSS.
When you need fine grained control over the event chain .addEventListener() is better suited to handle particular aspects like firing the event on the capture phase instead of the bubbling phase. The reason why is because li.tag will be before a.link on the first phase (i.e. capture phase) of the event chain. We assign capture or bubbling phase by assigning the appropriate boolean value to the third parameter:
document.addEventListener('click', function(e) {...}, false);
This is default, which is set at false for the bubbling phase.
document.addEventListener('click', function(e) {...}, true);
This will make the registered object (e.g.document in this example) listen and act on the capture phase.
The following demo -- during capture phase -- will:
li.tag as the event.target... e.stopPropagation() so the a.link nested within the li.tag will not be included in the event chain. The bubbling phase is skipped as well. a.link bees e.target on a new event chain because the trigger method .click() is invoked on it.The 3rd link of List0 tests whether a.link is indeed triggered by .click() or firing during capture or bubbling phase, or is the event.target. Because each a.link in List0 has pointer-events:none which makes a.link oblivious to any mouse or click event from a user, we can conclude:
that any activation of said a.link is entirely dependant upon its parent li.tag being clicked by a user.
during the capture phase, no click event will reach a.link due to e.stopPropagation() and pointer-events:none it can't be e.target.
bubbling phase isn't even there for a.link because of e.stopPropagation()
As that event chain dies off .click() is fired and a.link goes off like a second stage rocket