Заменить живой() с на()

Question

Из документации

$(selector).live(events, data, handler);    // jQuery 1.3+ 
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);  // jQuery 1.7+ 

Я использую JQuery 1.7.1

Это работает, для статических элементов и динамически нагруженных элементов:

$("input").live("change", function() { alert("hello"); }); 

Это не работает, даже для статических элементов:

$("document").on("change", "input", function() { alert("hello"); }); 

Что мне не хватает?

Answer 1

Написать это как

$(document).on("change", "input", function() { alert("hello"); }); 

Вы можете заменить document любой closer parent element, который всегда будет существовать в DOM для лучшей производительности. Как

$('#closest_static_container_id').on("change", "input", function() { 
    alert("hello"); 
}); 

если вы используете $("document") JQuery будет искать node/tag названный как document как <document> и не найти ничего, как document на самом деле object.

Но вы можете использовать $("body"), так как body является узлом/элементом DOM.

Answer 2

Изменение:

$("document").on(...) 

Кому:

$(document).on("change", "input", function() { alert("hello"); }); 

document является объектом (свойство window), а не тип узла.

$("document").on(...) 

Что ищет <document> элементов в document объекте, например:

<document> 

И, как вы, вероятно, получил в настоящее время, нет ни ...

Во всяком случае, лучшая практика с on заключается в использовании ближайшего статического элемента к динамическим добавленным элементам. Кое-что вроде:

<div id='container-div-id'> 
    <input /> ... this will be added later. 
</div> 

$('#container-div-id').on("change", "input", function() { 
    alert("hello"); 
}); 

Answer 3

document - это объект, и вы используете его как строку. Итак, jQuery попытается использовать его как селектор css и он не найдет ничего, чтобы присоединить обработчик событий.

Попробуйте это.

$(document).on("change", "input", function() { alert("hello"); });