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

79

В настоящее время с 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 ExceededonError: User Rate Limit ExceededclickError: User Rate Limit ExceededclickError: User Rate Limit ExceedednotError: User Rate Limit ExceededclickError: User Rate Limit Exceeded 1j01

Ваш Ответ

10   ответов
1

.on()click()

.click(...

.on(...

1

on

$(document).on("click", ".className", function(){});

140

on()

on()click()

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

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

elementClasselementClass$('<div class="elementClass" />')

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

#container.elementClass

Error: User Rate Limit Exceeded
4

live and bind.

live

bindclickdirectly

live

1

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").

2

dynamically added elementsliveon$('element').click(...);

.

39

click()bind('click' ...)bind()$('a').click(...)

live()bind()

live()live()

on()on()

live()

Error: User Rate Limit Exceeded
7

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

$("..click() === $("..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')
Error: User Rate Limit Exceeded
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

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.

Похожие вопросы