为什么只有一个 jquery delegate() 有效？

Question

我对 jquery delegate() 有疑问。 这是一种用于添加新测试问题和答案的表格。但不幸的是，delegate() 不适用于生成的答案输入。添加新问题效果很好，但在生成的答案中不行。

$(".questions").delegate(".qadd", "click", function() {
    $(".questions").after("<div class='newq'><br><div><input placeholder='Question' type='text'/><a class='qdel' href='#'>-</a></div><div class='answers'><input placeholder='Answer' type='text'/><a class='ansadd' href='#'>+</a><label class='richtig'><input type='checkbox' name='checkbox' value='Richtig'>True</label></div></div>");

    $(".qdel").click(function() {
        $(this).closest(".newq").remove();
    });

});

$(".answers").delegate(".ansadd", "click", function() {
    $(".answers").first().after("<div class='newa'><input placeholder='Answer' type='text'/><a class='adel' href='#'>-</a><label class='richtig'><input type='checkbox' name='checkbox' value='Richtig'>True</label></div>");

    $(".adel").click(function() {
        $(this).closest(".newa").remove();
    });

});

你可以在这里查看我的代码： demo

Answer 1

您还需要注册 .ansadd 事件..

$(".questions").on('click', '.qadd', function () {
    $(".questions").after("<div class='newq'><br><div><input placeholder='Question' type='text'/><a class='qdel' href='#'>-</a></div><div class='answers'><input placeholder='Answer' type='text'/><a class='ansadd' href='#'>+</a><label class='richtig'><input type='checkbox' name='checkbox' value='Richtig'>True</label></div></div>");
})

$(document).on('click', '.qdel', function () {
    $(this).closest(".newq").remove();
});
$(document).on('click', '.ansadd', function () {
    $(this).after('<span>Do Whatever you want to do</span>');
});



$(document).on('click', '.adel', function () {
    $(this).closest(".newa").remove();
});

Answer 2

首先delegate() 是一种非常过时的方法。您应该改用on()。要解决您的问题，请将 click() 处理程序从委托中移出，并将它们也放入委托的事件处理程序中。试试这个：

$(".questions").on('click', '.qadd', function() {
    $(".questions").after("<div class='newq'><br><div><input placeholder='Question' type='text'/><a class='qdel' href='#'>-</a></div><div class='answers'><input placeholder='Answer' type='text'/><a class='ansadd' href='#'>+</a><label class='richtig'><input type='checkbox' name='checkbox' value='Richtig'>True</label></div></div>");    
})

$(document).on('click', '.qdel', function() {
    $(this).closest(".newq").remove();
});

$(".answers").on('click', '.ansadd', function() {
    $(".answers").first().after("<div class='newa'><input placeholder='Answer' type='text'/><a class='adel' href='#'>-</a><label class='richtig'><input type='checkbox' name='checkbox' value='Richtig'>True</label></div>");    
})

$(document).on('click', '.adel', function() {
    $(this).closest(".newa").remove();
});

请注意，为了获得最佳性能，您应该将上面示例中的$(document) 更改为最接近页面加载时出现在DOM 中的.adel 和.qdel 的父元素。我仅将其用作示例，因为您没有展示其他可以解决问题的元素。