Динамически добавленная кнопка jquery не работает

Question

Динамически добавленная кнопка jquery не работает

0

У меня есть два вызова jquery. Первая добавляет кнопку в html, а вторая делает что-то, если нажата кнопка добавления. Проблема в том, что вторая не работает вообще.

Html выглядит так:

<input type="button" id="add_button" value="Add the button">
<div id="results"></div>

Файл сценария выглядит так:

$("#add_button").on('click', function () {
     $("#results").html('<input type="button" class="ok_button" value="OK">');
});
$(".ok_button").on('click', function () {
    alert('ok');
});

Здесь скрипка

mistily 12 нояб. 2013, в 15:32

Источник

Теги:

jquery

html

button

dom

5 ответов

1

Этот фрагмент не работал, потому что событие было привязано к DOM, прежде чем элемент был добавлен к нему. Попробуйте следующий фрагмент:

$("#add_button").on('click', function () {
   $("#results").html('<input type="button" class="ok_button" value="OK">');
   $(".ok_button").off('click').on('click', function() {
       alert("ok");
   });
});

Chimba 12 нояб. 2013, в 14:17

1

$(document).on('click', "#add_button", function (){
$("#results").append('<button type="button" class="ok_button">ok</button');

});
$(document).on('click', ".ok_button", function (){
alert("i know nothing");
});

Asif Mahamud 12 нояб. 2013, в 12:34

1

Поскольку ok_button добавляется динамически, вам нужно использовать event delegation для регистрации обработчика событий, например: -

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#results').on('click', '.ok_button', function() {
    alert('ok'); 
});

Демо-версия скрипта

palaѕн 12 нояб. 2013, в 12:13

1

$("#add_button").click(function() {
    $newButton = $('<input type="button" class="ok_button" value="OK">');
    $newButton.click(function() {
        alert('ok');
    });
    $("#results").append($newButton);
});

Рабочий пример: jsfiddle.net

arvic.rivera 12 нояб. 2013, в 12:05

Ещё вопросы

Tushar Gupta · Accepted Answer · 2013-11-12T12-51-00.000Z

Использовать .on()

Поскольку элементы добавляются динамически, вы не можете напрямую связывать события с ними. Поэтому вам нужно использовать Event Delegation.

$('#results').on('click', '.ok_button', function() { ..code here.. }

Синтаксис

$( elements ).on( events, selector, data, handler );

Fiddle Demo