2013-07-24 8 views
0

Я создаю элемент с помощью Jquery и дать ему класс .book:нажмите на Jquery созданный элемент не работает

jQuery('<div/>', { 
    name: "my name", 
    class: 'book', 
    text: 'Bookmark', 
}).appendTo('body'); 

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

$('.book').click(function(){ 
    alert('I have been clicked'); 
}); 

это работает

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

var bms = 0; 
$('button').click(function(){ 
    bms += 1; 
    jQuery('<div/>', { 
     name: bms, 
     class: 'book', 
     text: 'Bookmark ' + bms 
    }).appendTo('body'); 
}); 
$('.book').click(function(){ 
    alert('I have been clicked'); 
}); 

почему это происходит, и как я могу это исправить?

Jsfiddle

другая вещь:

Кроме того, если у меня уже есть DIV с классом .book в моем теле, событие щелчка будет работать на том, но не любой из прилагаемой div s. here is another jsfiddle to show that

+0

Посмотрите обработку событий с динамически добавленными элементами. –

+0

В то время '$ ('. Book'). Click (..." назначение обработчика событий происходит, нет элементов DOM с 'class =" book "'. См. Ответ @KyleK для способа присвоить события текущему и будущие предметы. – Igor

ответ

4

Вы должны делегировать вновь созданные элементы, как так ...

Просто замените это ...

$('.book').click(function(){ 
    alert('I have been clicked'); 
}); 

С этим ....

$(document).on('click','.book', function(){ 
    alert('I have been clicked'); 
}); 
+0

отлично, спасибо! –

+0

жаль, что я не согласился с этим раньше, потому что было слишком рано, а затем мне пришлось выполнить поручение –

1

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

HTML:

<body> 
    <button>Click here to add book.</button> 
</body> 

И ваши JS:

$(document).on("click", ".book", function() { 
    alert('it works!'); 
}); 

var bms = 0; 
$('button').click(function(){ 
    bms += 1; 
    jQuery('<div/>', { 
     name: bms, 
     class: 'book', 
     text: 'Bookmark ' + bms 
    }).appendTo('body'); 
}); 

Кроме того, при этом, не прикрепить его к родителю, что это слишком высоко дерево. Вы хотите прикрепить его к ближайшему возможному родительскому элементу. Нам не нужно иметь событие click на чем-то вроде document, потому что это хорошая идея, чтобы быть конкретным, какие элементы получат это событие. Прикрепление его к document будет означать, что любой элемент, который имеет класс .book, будет доступен для нажатия и ответа на один и тот же код. Если вы хотите иметь разную функциональность на разных кнопках, вы не можете, потому что все они отвечают на тот же код, что и на document.

1

Это прямые привязки, которые не работают с динамически добавленными элементами, такими как .book.

Вы можете использовать .on() связать событие с динамически добавляемых элементов, как, что:

$('body').on('click', '.book' ,function(){ 
    alert('I have been clicked'); 
}); 

Где тело будет ближайший статический элемент. Эти типы привязки называются делегированными событиями.

Fiddle: http://jsfiddle.net/3MpcG/2/

Или вы можете связать прямое событие на элемент при его создании.

.appendTo('body').click(function(){ 
    alert('I have been clicked'); 
}); 

Fiddle: http://jsfiddle.net/3MpcG/3/

Оба имеют преимущества и недостатки, вы можете прочитать их на jQuery .on() docs странице.