#javascript #jquery #html #dom
#javascript #jquery #HTML #dom
Вопрос:
Я сделал следующий код, чтобы прояснить вопрос:
HTML:
<body>
<div class="static">This is a static div</div>
<button class="add-dynamic-button">Click me to add a new button</button>
</body>
Js:
$(function(){
$('.add-dynamic-button').on("click",function(){
$('body').append("<button class='dynamic-button'>Click me to add a dynamic div'</button>");
});
$('.dynamic-button').on('click',function(){
$('body').append("<div class='dynamic-div'>This is a dynamic div</div>");
});
});
И вот jsfiddle для тестирования: http://jsfiddle.net/6ZN5J /
Когда у меня есть обработчик $(‘.dynamic-button’).on(‘click’) внутри первого обработчика щелчка, .dynamic-div добавляется нормально. Но когда я помещаю его за пределы области первого обработчика щелчков (как в примере выше), ничего не происходит. Сначала я думал, что $.on работает с любым элементом DOM, который еще не создан, но теперь оказывается, что он работает с новыми элементами того же класса или типа, если они уже есть в DOM или когда $.on помещается внутри функции, которая создает эти элементы. Можете ли вы пояснить, почему это происходит и существуют ли какие-либо методы, позволяющие использовать обработчики событий для динамически создаваемых элементов вне обработчика, с помощью которого они были созданы? Спасибо
Ответ №1:
$() является селектором. Он находит элементы, которые были в документе, или родительский элемент, из которого вы формируете весь запрос в то время, когда вы это делали.
Если вы хотите, чтобы дополнительные кнопки были привязаны к click событию, вам нужно будет вручную привязать их:
$('body').append("<button class='dynamic-button'>Click me to add a dynamic div'</button>")
.on("click", ....);