JQuery ON не работает

Question

Я практически потратил более 4 часов на выяснение, что не так с тем, что я делаю. Пожалуйста, помогите мне, почему это работает:

$("div.spinedit i.modify-counter").on('click', function() { 
     alert("here"); 
    }); 

и это не делает:

$(document).on("click", "div.spinedit i.modify-counter", function(e) { 
     alert("here"); 
    }); 

Первый код работает только с деталями, сгенерированных вместе со страницей, что мне нужно для того, чтобы работать на AJAX-генерируемые элементы.

Answer 1

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

Следующий код должен работать.

$(document).on("click", "i.modify-counter", function(e) { 
    alert("here"); 
}); 

ИЛИ

$("div.spinedit").on("click", "i.modify-counter", function(e) { 
    alert("here"); 
}); 

Read more information here.

Answer 2

Вы пробовали

$("div.spinedit").on('click', "i.modify-counter", function() { 
     alert("here"); 
}); 

или

$(document).on('click', "i.modify-counter", function() { 
      alert("here"); 
}); 

?

Answer 3

«on» не будет работать с динамически созданным контентом. Вместо этого вам нужно приложить метод «on» к статическому родительскому элементу и передать ваш актуал динамически вставленный тег в качестве второго параметра.

Answer 4

Во-первых, захватите родительский элемент, который является статическим (я думаю, это .spinedit), а затем назначьте событие click каждому элементу .modify-counter, который находится внутри него.

Как это:

$('div.spinedit').on('click', 'i.modify-counter', function(event) { 
    alert("Hello, I'm working!"); 
}); 

Answer 5

С первого примера ....

$("div.spinedit i.modify-counter").on('click', function() { 
    alert("here"); 
}); 

Вы найти все элементы, когда страница загружается и после привязки обработчика событий для каждого из этих элементов , Если элемент DOM отсутствует в этот момент времени, он не собирается запускать обработчик событий ... как он мог запустить обработчик, если он не был вокруг, когда вы его установили ???

$(document).on("click", "div.spinedit i.modify-counter", function(e) { 
    alert("here"); 
}); 

Здесь вы найдете документ при загрузке страницы и привязке к нему обработчика кликов. Вы не привязка обработчика кликов к i.modify-counter элементов. Тем не менее, второй параметр (например, "div.spinedit i.modify-counter") указывает обработчику, что он должен стрелять только когда

1. элемент, который был щелкнул был дочерний элемент документа, и,
2. элемент, который был щелкнул спичках который вы прошли.

Это тонкий, но большой разница. Поскольку обработчик находится на document, нет необходимости перепроверять обработчик кликов, когда новые элементы AJAX добавляются позже ... потому что обработчик не находится в этих элементах.

Каждый раз, когда нажата клавиша document, обработчик будет оценивать, соответствует ли этот селектор. Если это произойдет, событие будет запущено.