Is there is a way to only let the inner element of a listitem
do something?
I have list elements that can contain a
tags with a certain class.
The inner a
tags are bound to a live click event handler. The list items themselves have also a click event handler.
Something like this
<li>some text<a class="someClassName">some text</a></li>
with the handler for the a
tags
$('#somelist li a').live("click", function(e)
and this is how the event for li item is added
$(markers).each(function(i,marker){
$("<li />")
.html("Locatie "+'<a class="ol id"><strong>'+ids[i]+'</strong></a>')
.click(function(e){
showLocation(marker, i);
})
.appendTo("#somelist ");
Syntax: $(". event-handler-btn"). one("click", function (e) { // Code to be executed once });
jQuery one() Method The one() method attaches one or more event handlers for the selected elements, and specifies a function to run when the event occurs. When using the one() method, the event handler function is only run ONCE for each element.
The event. preventDefault() method stops the default action of an element from happening. For example: Prevent a submit button from submitting a form. Prevent a link from following the URL.
In short: . bind() will only apply to the items you currently have selected in your jQuery object. . live() will apply to all current matching elements, as well as any you might add in the future.
The live
method in jQuery works via event delegation, which is the act of catching all the bubbled events from individual elements onto a common ancestor (in your case its document
).
Stopping the propagation/bubbling of the click event occurs on the handler element (which is the common ancestor, not on the element itself) and exists way above the li
that you are trying to avoid.
So by the time the stopPropagation
method gets called, we've already traversed down the dom and passed the li
element.
It's essentially putting a stop sign 200ft after the intersection.
So you'll either need to use bind
and stopPropagation
or find a different solution.
Here is an example of what I'm talking about: http://jsbin.com/ibuxo (check the console)
you can see the code or edit it at http://jsbin.com/ibuxo/edit
My suggested solution to this problem would be to use bind
instead of live
.
This requires you to do a little bit extra work, but it's not so bad.
You are probably using live
because you are adding new elements, and you want them to have the same functionality. You should do this by binding them when you input them to the page. Here's an example
$(function(){
var myAnchorHandler = function(e){
alert('clicked!');
e.stopPropagation();
return false;
};
// initial bind
$('#somelist li a').click(myAnchorHandler);
// code where you input more li elements to the list with links
$('#somelist').append(
// bind your function to the element now, and then append it
$('<li><a>hi</a></li>').find('a').click(myAnchorHandler).parent()
);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With