jquery динамически добавленный флажок не работает с функцией change ()

Question

Я динамически загружаю несколько li, которые имеют метку и флажок в них, на другой видимый ul. Я установил флажки для check = "флажок" и пытаюсь вызвать событие, которое происходит, когда я изменяю эти динамически вставленные флажки, но ничего не происходит.

Вот jquery:

$(".otherProductCheckbox:checkbox").change( function(){
    alert('test');
});

Вот HTML-код для динамически добавляемых li:

<li class="otherProduct"><input type="checkbox" class="otherProductCheckbox radioCheck" checked="checked"/><label>Product Name</label></li>

Есть идеи, почему я не могу получить предупреждение, когда флажок меняет свое отмеченное состояние?

Answer 1

Вы должны использовать liveQuery или live для привязки событий к динамически добавляемым элементам.

$(".otherProductCheckbox:checkbox").live('change', function(){
    alert('test');
});

EDIT Чтобы работать в IE, вам нужно использовать click not change

$(".otherProductCheckbox:checkbox").live('click', function(){
        alert('test');
 });

Answer 2

Поскольку live () теперь устарело , начиная с jQuery 1.7, я подумал, что опубликую решение, которое помогло мне решить ту же проблему (событие триггера, когда динамически добавленные флажки изменены).

$(document).on('click', '.otherProductCheckbox', function() {
    alert('test');
});