Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery how to execute event only on the inner element

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 ");
like image 514
Richard Avatar asked Feb 23 '10 19:02

Richard


People also ask

How do you attach a event to element which should be executed only once?

Syntax: $(". event-handler-btn"). one("click", function (e) { // Code to be executed once });

How do I run a function only once in jQuery?

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.

What is event preventDefault () in jQuery?

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.

What is difference between BIND and live in jQuery?

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.


1 Answers

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()
  );
});
like image 58
Alex Sexton Avatar answered Sep 23 '22 16:09

Alex Sexton