cycling jQuery_Succinctly | Page 75

$('ul').click(function (event) { // Attach click handler to

and pass event object. // event.target is the . $(event.target).parent().remove(); // Remove
• using parent() return false; // Cancel default browser behavior, stop propagation. }); })(jQuery); Now, if you were to literally click on one of the actual bullets of the list and not the link itself, guess what? You'll end up removing the
  . Why? Because all clicks bubble. So when you click on the bullet, the event.target is the
  • , not the . Since this is the case, the parent() method will grab the
    and remove it. We could update our code so that we only remove an
    • when it is being clicked from an by passing the parent() method an element expression. $(event.target).parent('li').remove(); The important point here is that you have to manage carefully what is being clicked when the clickable area contains multiple encapsulated elements due to the fact that you never know exactly where the user may click. Because of this, you have to check to make sure the click occurred from the element you expected it to. Applying event handlers to DOM elements regardless of DOM updates using live() Using the handy live() event method, you can bind handlers to DOM elements currently in a Web page and those that have yet to be added. The live() method uses event delegation to make sure that newly added/created DOM elements will always respond to event handlers regardless of DOM manipulations or dynamic changes to the DOM. Using live() is essentially a shortcut for manually having to set up event delegation. For example, using live() we could create a button that creates another button indefinitely. Sample: sample71.html Add another button