javascript - 使用 jquery 显示和隐藏输入

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 8 年前。

我有这个简单的代码:

$("#additional-room").hide();

var numAdd = 0;
$("#add-room").click(function(e) {
    e.preventDefault();
    $("#additional-room").show("");

    if (numAdd >= 3) return;
    numAdd++;
    $('#additional-room').append('<p><input type="text" placeholder="room"></input><a href="#">delete</a></p>');
});

$("#additional-room a").click(function(e) {
    e.preventDefault();
    $(this).parent().remove();
    numAdd--;
    if (numAdd < 1) $("#additional-room").hide("");
});

它应该在需要时添加输入字段，但是删除功能不起作用。我确信这是一个简单的功能，但我不明白为什么它不起作用。请帮忙

Js fiddle :http://jsfiddle.net/qme9nq0b/1/

Answer 1

由于p标签是动态添加的，所以需要使用事件委托(delegate):

$("#additional-room").on('click','a',function(e) {
    e.preventDefault();
    $(this).parent().remove();
    numAdd--;
    if (numAdd < 1) $("#additional-room").hide("");
});

Working Demo