Question

我有一个清单，当我点击一个复选框时，我会得到一个列表。我可以检查多个复选框 - 所以我得到更多列表。我通过JQuery在每个列表的末尾添加一个按钮。我的按钮代码如下所示：

//Add a button to the previous list:
function add() {
    $(".list:last").append("<div id='button'><input type='button' class='click' id='feld' name='feld' value='+'/>Add new listfield</div>");
}

当我点击按钮时，我得到一个带有空文本字段的新复选框：

$(document).ready(function() {
    // Variables for counting
    var utxtname = 0;
    var ucheckname = 0;
    var utxtid = 1;
    var ucheckid = 1;
    var uctxtname = 1;
    var uccheckname= 1;

    //Function for the buttons with the same class ".click"

    $(document).on('click', '.click', function() {
        var utxtname ='utxtfield'+uctxtname;
        var ucheckname ='uchecklist'+uccheckname;
        $(this).closest(".list").append("<br><input type='checkbox' name=' "+ucheckname+"' id='"+ucheckid+"' checked><input type='textfield' name ='"+utxtname+"' id='"+utxtid+"'/>");
        uctxtname += 1;
        uccheckname += 1;
        utxtid += 1;
        ucheckid += 1;
    });

});

我的问题：

当我生成多个Button时，该函数会多次触发。如果我有3个生成按钮的3个列表，如果单击按钮，我的函数会生成3个按钮。我知道我的错误的原因。这是因为我有3个具有相同类的按钮，因此它会多次触发该功能。我只是想不通如何解决这个问题。我尝试了很多方法来防止这种情况。例如，取消绑定该函数并再次绑定它。我还尝试动态添加具有独特功能的按钮，但我无法得到它。任何想法如何更容易解决这个问题？

Answer 1

使用内部函数是最简单的解决方案，但可能会导致内存泄漏。这只是一个更多的选择。

function add() {
    var $button = $("<div id='button'><input type='button' class='click' id='feld' name='feld' value='+'/>Add new listfield</div>");
    $(".list:last").append($button);
    $button.click(function(){
        /*process here*/
    });
}

仅提醒，按钮可能无法释放，因为点击功能已绑定。如果您使用自己的代码删除，请添加$("button").unbind("click");

Answer 2

在Off()语句
之前在jquery中使用on()

Answer 3

您可以使用

e.PreventDefault();

语句以防止多次触发。

JQuery - Button多次触发

3 个答案: