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

首先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最近的父元素。我只用它作为一个例子，因为你没有展示出其他可以解决问题的元素。

Answer 2

您还需要注册.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();
});

为什么只有一个jquery delegate（）可以工作？

2 个答案: