jQuery: редактирование вставленных пользователем элементов DOM

Question

Я хочу добавить элементы HTML (текст и кнопки внутри div) в DOM, и каждый элемент будет редактируемым или удаляемым.Я использовал jquery, чтобы сделать это следующим образом.

<div id="ak"></div>
<input type="text" name="lname" id="itext" size="60"/><br/>
<button id="but">Add Item</button>
<div id="test"></div>

$("#but").click(function(){
        var istring = $("#itext").val();
        $("#ak").append("<div class=\"item\"><p>"+istring+"<button class=\"editable\">Edit</button><button class=\"deletable\">Delete</button></p></div>");
        $("#itext").val("");
});

$(".deletable").click(function(){
    alert("Alert !!");   
});

Однако, когда я нажимал кнопку удаления в каждом элементе, ничего не происходило (должно выдаваться предупреждение).Я чувствую, что-то очень неправильно.Любая помощь приветствуется.

Answer 1

Я столкнулся с этой проблемой несколько дней назад, но один из моих коллег был достаточно любезен, чтобы прояснить мою путаницу.

Вам нужно перепривязать событие click после добавления HTML в dom илииспользуйте jQuery live .Некоторые старые версии jQuery не поддерживают live, поэтому вы можете использовать альтернативные средства.

Следующее повторно связывает событие click после загрузки HTML:

$("#but").click(function(){
        var istring = $("#itext").val();
        $("#ak").append("<div class=\"item\"><p>"+istring+"<button class=\"editable\">Edit</button><button class=\"deletable\">Delete</button></p></div>");
        $("#itext").val("");
        clickEvent();
});
function clickEvent(){
    $(".deletable").click(function(){
        alert("Alert !!");   
    });
}

Или, используя jQuery live :

$(".deletable").live('click',function(){
    alert("Alert !!");   
});

Answer 2

Я бы сказал, что это один из ярких драгоценных камней jQuery, эти обработчики событий для динамически создаваемых элементов HTML. Это совершенно правильная тема, но я все еще хотел бы, чтобы у нас была, например, четверть для всех, кто спрашивал, почему обработчики событий не работают с динамически создаваемыми элементами HTML. : D

И в каждом таком вопросе я бы сказал, что вы используете .delegate() вместо .live(), тем более что (по крайней мере, в вашем примере кода) вы знаете точно с самого начала Вы вставляете свои элементы.

$('#ak').delegate('.deletable', 'click', function (e) {
    // do something
});

Нет смысла переходить на .live() и вызывать глобальный обработчик в глобальном контексте.

Если вы серьезно не хотите идти по пути live / delegate, вы всегда можете включить свои обработчики при создании элемента.

// creating a button with a click event handler
$('<button/>', {
    id : 'foo',
    class : 'deletable',
    click : function (e) {
        // do something
    }
});

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

Answer 3

use jQuery.live bcoz

Метод .live () может воздействовать на элементы, которые еще не были добавлены в DOM, черезиспользование делегирования события:

$(".deletable").live('click',function(){
    alert("Alert !!");   
});

DEMO