Привязка события Jquery к кнопке в ответе события Async

Question

У меня есть страница, которая отправляет асинхронный запрос Jquery на другую страницу, и я получаю кнопку в ответ. Кнопка имеет класс "delete_button".

<BUTTON class="delete_button">Delete</BUTTON> 

Проблема в том, что эта «новая» кнопка не связана (и не вызывает) какое-либо событие JQuery.

Я попытался использовать функцию .on() (И старый устаревший .live()), но я не смог привязать событие к этой кнопке. Jquery даже выглядит следующим образом.

$(".delete_button").on("click", function(){ 
    //Code here... 
});  

Я проверил с помощью отладчика, что кнопка действительно имеет правильный класс, а Javascript не сигнализирует об ошибке. Ничего странного в консоли. Просто событие не происходит.

Answer 1

Предположим, что когда вы получаете свой delete_button, он добавляется к div, так что он находится внутри этого div, например.

<div id="myDiv"> 
    <button class="delete_button">Delete</button> 
</div> 

Зная это, вы можете создать на мероприятии, как это:

$("#myDiv").on("click", ".delete_button", function(){ 
    //Code here... 
}); 

Таким образом, событие привязывается к элементу, который, безусловно, существует, а затем JQuery делегатов, что событие для любой динамически создаваемых элементов с селектором .delete_button.

То, как вы это делаете в настоящее время, не имеет значения, что вы используете .on, потому что начальный селектор (в части $ ("селектор") должен быть тем, что существует, когда страница загружается. См. http://api.jquery.com/on/ и раздел «Прямые и делегированные события» для более полного объяснения.