79

Вопрос по javascript, jquery – Зачем использовать jQuery on () вместо click ()

В настоящее время с jQuery, когда мне нужно что-то сделать, когда происходит щелчок, я сделаю это так ...

$(".close-box").click( function() {
    MoneyBox.closeBox();
    return false;
});

Я смотрел на какой-то код, который кто-то еще имеет в проекте, и они делают это так ...

$(".close-box").live("click", function () {
    MoneyBox.closeBox();
    return false;
});

Обратите внимание, что, как я могу судить, он делает то же самое, за исключением того, что он использует функцию live (), которая теперь устарела, а документы jQuery говорят, что используютon() вместо этого, но так или иначе, зачем использовать live / on () вместо моего первого примера?

Error: User Rate Limit Exceeded<code>on</code>Error: User Rate Limit Exceeded<code>click</code>Error: User Rate Limit Exceeded<code>click</code>Error: User Rate Limit Exceeded<i>not</i>Error: User Rate Limit Exceeded<code>click</code>Error: User Rate Limit Exceeded

Apr 01, 2018, 6:55 PMот

10ответов

2

Error: User Rate Limit Exceededdynamically added elementsError: User Rate Limit ExceededliveError: User Rate Limit ExceededonError: User Rate Limit Exceeded$('element').click(...);Error: User Rate Limit Exceeded

Error: User Rate Limit ExceededError: User Rate Limit Exceeded.

140

Error: User Rate Limit Exceededon()Error: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

on()Error: User Rate Limit Exceededclick()Error: User Rate Limit Exceeded

$('.elementClass').click(function() { // code 
});

Error: User Rate Limit Exceeded

$('.elementClass').on('click', function() { // code
});

Error: User Rate Limit ExceededelementClassError: User Rate Limit ExceededelementClassError: User Rate Limit Exceeded$('<div class="elementClass" />')Error: User Rate Limit Exceeded

$('#container').on('click', '.elementClass', function() { // code
});

Error: User Rate Limit Exceeded#containerError: User Rate Limit Exceeded.elementClassError: User Rate Limit Exceeded

1

Error: User Rate Limit ExceededonError: User Rate Limit Exceeded

Error: User Rate Limit Exceeded$(document).on("click", ".className", function(){});

Error: User Rate Limit Exceeded

39

Error: User Rate Limit Exceeded

Error: User Rate Limit Exceededclick()Error: User Rate Limit Exceededbind('click' ...)Error: User Rate Limit Exceededbind()Error: User Rate Limit Exceeded$('a').click(...)Error: User Rate Limit Exceeded

Error: User Rate Limit Exceededlive()Error: User Rate Limit Exceededbind()Error: User Rate Limit Exceeded

Error: User Rate Limit Exceededlive()Error: User Rate Limit Exceededlive()Error: User Rate Limit Exceeded

Error: User Rate Limit Exceededon()Error: User Rate Limit Exceededon()Error: User Rate Limit Exceeded

Error: User Rate Limit Exceededlive()Error: User Rate Limit Exceeded

3

$el.click(fn)Error: User Rate Limit Exceeded$el.on('click', fn)

Error: User Rate Limit ExceededError: User Rate Limit ExceededError: User Rate Limit ExceededError: User Rate Limit ExceededError: User Rate Limit Exceeded

4

Error: User Rate Limit ExceededError: User Rate Limit Exceededlive and bind.

Error: User Rate Limit ExceededliveError: User Rate Limit Exceeded

Error: User Rate Limit ExceededbindError: User Rate Limit ExceededclickError: User Rate Limit ExceededdirectlyError: User Rate Limit Exceeded

Error: User Rate Limit ExceededliveError: User Rate Limit Exceeded

18

  • $("a").live() --> It will apply to all <a>, even if it is created after this is called.
  • $("a").click() --> It will only apply to all <a> before this is called. (This is a shortcut of bind(), and on() in 1.7)
  • $("a").on() --> Provides all functionality required for attaching event handlers. (Newest in jQuery 1.7)

Quotes:

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
This method provides a means to attach delegated event handlers to the document element of a page, which simplifies the use of event handlers when content is dynamically added to a page. See the discussion of direct versus delegated events in the .on() method for more information.

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.

For earlier versions, the .bind() method is used for attaching an event handler directly to elements.

1

Error: User Rate Limit Exceeded

In the first two variations, this method is a shortcut for .bind("click", handler), as well as for .on("click", handler) as of jQuery 1.7. In the third variation, when .click() is called without arguments, it is a shortcut for .trigger("click").

7

click()Error: User Rate Limit Exceededon()Error: User Rate Limit Exceeded

$(".close-box").click() === $(".close-box").on('click')

Error: User Rate Limit Exceededon()Error: User Rate Limit Exceeded

$(document).on('click', '.close-box') // Same as $('.close-box').live()

Error: User Rate Limit Exceededon()Error: User Rate Limit ExceededdocumentError: User Rate Limit Exceededlive()Error: User Rate Limit Exceeded

$("#closestStaticElement").on('click', '.close-box')
1

Error: User Rate Limit Exceeded.on()Error: User Rate Limit Exceededclick()Error: User Rate Limit Exceeded

Error: User Rate Limit Exceeded.click(...Error: User Rate Limit Exceeded

Error: User Rate Limit Exceeded.on(...Error: User Rate Limit Exceeded

RelatedQuestions