это мой html
<div id="main">
<div class="submit">welcome</div>
</div>
это мой jquery
$(".submit").click(function()
{
$("$main").append('<div class="submit">welcome</div>');
});
здесь, что случилось, это работает для первого div. Это событие не работает для недавно добавленного div?
как это решить?
У вас есть два варианта делегирования (назначение обработчика щелчка, которое будет обнаружено родителем):
$('#main').on('click', 'div.submit', function(){
// this is your click-handler
});
Или связывая обработчик кликов в точке создания элемента:
$(".submit").click(function() {
$('<div />', {
'class' : 'submit',
'on' : {
'click' : function(){
// this is your click-handler
}
}).appendTo('#main');
});
Очевидно, что если у вас есть именованная функция для вызова, вы можете назначить это вместо использования анонимной функции:
$('#main').on('click', 'div.submit', namedFunctionToCall);
Или:
$(".submit").click(function() {
$('<div />', {
'class' : 'submit',
'click' : namedFunctionToCall
}).appendTo('#main');
});
Рекомендации:
Вам нужно определить #, если вы используете div id like
$("#main").append();
В случае, если ваш класс использования может быть доступен. как это
$(".main").append();
Попробуй это
$(function(){
$('.submit').bind('click', function (event) {
alert("Hello");
});
});
Вы можете использовать функцию live
$( ".submit" ).live( "click", function() {
alert("Appended" ); // jQuery 1.3+
});
live()
устарела в 1.7 (в пользу on()
) и удалена в 1.9 (я не обязательно критикую ваш ответ, просто отмечаю, что live()
может (не может) работать в зависимости от версии JQuery используется). Также там, где доступна live()
, команда jQuery рекомендует delegate()
.
Использование делегирования событий
$("#main").on('click', '.submit', function () {
$("#main").append('<div class="submit">welcome</div>');
});
Демо: скрипка
Использовать делегацию:
$("#main").on("click", ".submit", function()
{
$("#main").append('<div class="submit">welcome</div>');
});
И заменить $
с #
при выборе #main
.
$("#main").on('click', '.submit', function () { $("#main").append('<div class="submit">welcome</div>'); });