发表新帖
发表新帖

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

后端 未结
关注
3 1372
旧时难觅i
旧时难觅i 2020-11-27 06:20

I usually use

$(selector).click(...

But some people recommend me to use this instead: 

$(selector).on(\"click\", function(.
相关标签:
3条回答
  • 南笙
    2020-11-27 06:35

    In the plain .click(... if the target of the selector changes on the fly (e.g via some ajax response) then you'd need to assign the behavior again.

    On .live(... the behavior will be automatically be reapplied on the selector.

    The .on(... is very new (jQuery 1.7) and it can cover the live scenario using delegated events which is a faster way to attach behavior anyway.

    0 讨论(0)
  • 灰色年华
    2020-11-27 06:44

    The only difference is that .click() will be applied on the elements that exist in the DOM with that particular selector (only the ones that already exist ).
    In the other hand .on(selector ,"click",callback); will be applied on all the elements that match that selector even in the future, let me give an example :

    $('p').click(function(){
$(this).next('<p>this is a copy of the previous paragraph </p>');
});

    If you click on the paragraph that says "this is a copy of the previous paragraph" (the new one ) you don't get the result that you want which is to add a paragraph next to the clicked one because it was not there at the beginning

    but if you use 

    $('p').on("click",function(){
$(this).next('<p>this is a copy of the previous paragraph </p>');
});

    you will get what you want (because .on or .delegate find the match even with the new ones)

    0 讨论(0)
  • 眼角桃花
    2020-11-27 06:55

    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()
})
    0 讨论(0)
 看不清?
提交回复
热议问题