jQuery: difference between .click() AND .on(“click”)

by

At the end of the day, every event is bound to some element in the DOM. In the case of .bind, you’re binding directly to the element (or elements) in your jQuery object. If, for example, your jQuery object contained 100 elements, you’d be binding 100 event listeners.

In the case of .live, .delegate, and .on, a single event listener is bound, generally on one of the topmost nodes in the DOM tree: document, document.documentElement (the <html> element), or document.body. Because DOM events bubble up through the tree, an event handler attached to the body element can actually receive click events originating from any element on the page. So, rather than binding 100 events you could bind just one.

For a small number of elements (fewer than five, say), binding the event handlers directly is likely to be faster (although performance is unlikely to be an issue). For a larger number of elements, always use .on.

The other advantage of .on is that if you add elements to the DOM you don’t need to worry about binding event handlers to these new elements. Take, for example, an HTML list:

<ul id="todo">
  <li>buy milk</li>
  <li>arrange haircut</li>
  <li>pay credit card bill</li>
</ul>

Next, some jQuery:

// Remove the todo item when clicked.
$('#todo').children().click(function () {
  $(this).remove()
})

Now, what if we add a todo?

$('#todo').append('<li>answer all the questions on SO</li>')

Clicking this todo item will not remove it from the list, since it doesn’t have any event handlers bound. If instead we’d used .on, the new item would work without any extra effort on our part. Here’s how the .on version would look:

$('#todo').on('click', 'li', function (event) {
  $(event.target).remove()
})

More Related Contents:

  1. jQuery call function from a string [duplicate]
  2. Replacing live with on function [closed]
  3. How do I pass a URL as a parameter? [closed]
  4. How to Get Response From rest URL using jquery
  5. .index() only for one instance of class [closed]
  6. Direct vs. Delegated – jQuery .on()
  7. What is the best way to add options to a select from a JavaScript object with jQuery?
  8. toggle show/hide div with button?
  9. Replace multiple strings at once
  10. jQuery selector for id starts with specific text [duplicate]
  11. How to filter JSON Data in JavaScript or jQuery?
  12. How can I determine if an image has loaded, using Javascript/jQuery?
  13. Call javascript function after script is loaded
  14. Dynamically loading css stylesheet doesn’t work on IE
  15. Merge Two Arrays so that the Values Alternate
  16. How to add a “readonly” attribute to an ?
  17. How can I detect whether an iframe is loaded?
  18. Javascript dynamically invoke object method from string
  19. Content Security Policy: The page’s settings blocked the loading of a resource
  20. Prevent Cheating on Javascript Game
  21. How can I change the default width of a Twitter Bootstrap modal box?
  22. jQuery date/time picker [closed]
  23. How to disable beforeunload action when user is submitting a form?
  24. Page Redirect after X seconds wait using JavaScript
  25. jquery datatables hide column
  26. Find HTML based on partial attribute
  27. How to test if a URL string is absolute or relative?
  28. jQuery see if any or no checkboxes are selected
  29. Call function with setInterval in jQuery?
  30. Are 301 redirects possible using javascript or jQuery?

Leave a Comment