Jquery / Javascript: кнопки, добавленные динамически с Javascript, не работают

Question

У меня есть фрагмент кода HTML:

<div id="chunk-1" class="chunk">  
    <div class="chunkText">Text<div>  
    <button class="addChunk">Click Me</button>  
</div>

<script>

$(".addChunk").click(function(){create_chunk(this.parentNode)})

function create_chunk(after_this){
    $(after_this).after(chunk_html)
    var i = 0
    $("div.chunk").each(function(){$(this).attr('id', "chunk-" + i++)})
    }

</script>

Теперь это работает, но только для .chunk, который статически отображается на странице. Когда я нажимаю кнопку, появляется второй блок, но эта кнопка не работает. Если я добавлю html для двух или более чанков, которые будут отображаться, каждый из них будет работать, но кнопки для чанков, которые он создает, - нет. Что мне делать?

Answer 1

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

$(".addChunk").click(function(){create_chunk(this.parentNode)})

вы можете использовать live handler для этого. следующий код решит вашу проблему

$(".addChunk").live('click'. function(){create_chunk(this.parentNode)});

Answer 2

заменить

.bind()

с

.live()

или даже лучше использовать

.delegate()

что в вашем случае:

$('#chunk-1').delegate('.addChunk', 'click', function(){create_chunk(this.parentNode);})

Более того, перейдите на www.jquery.com и прочитайте документацию.

Answer 3

Используйте "живую" функцию jQuery.

$(".addChunk").live('click'. function(){create_chunk(this.parentNode)});

Проблема в том, что вы привязываетесь к одному элементу. Опция «live» будет отслеживать документ на предмет кликов по элементам, имеющим класс «.addChunk».