JavaScript 事件监听器运行两次

Question

作为参考，请在下面的 JSFiddle 中查看我的示例。每次有人单击加号按钮时，都应在下方插入一个新行。除了插入的新行数始终是当前现有行数的两倍之外，这很好用。我怎样才能避免这种奇怪的行为，或者它的原因是什么？请点击第一行按钮查看问题。

http://jsfiddle.net/jrxeua6L/

var answers = [{
    order: 1,
    content: "placeholder"
}],
    appendAnswer = function() {

    answers.push({
        order: answers.length + 1,
        content: $(this).parent().prev().val()
    });

    $("#answers").empty();

    $.each(answers, function(key, value) {
        $("#answers").append('<div class="input-group"><input type="text" class="form-control" placeholder="Enter your answer"><span class="input-group-btn"><button type="button" class="btn btn-default" title="Add a question" data-action="add"><span class="glyphicon glyphicon-plus"></span></button><button type="button" class="btn btn-default" title="Delete this question" data-action="delete" disabled><span class="glyphicon glyphicon-trash"></span></button></span></div>');

        $("#answers button[data-action='add']").one("click", appendAnswer);
    });
};

$("#answers button[data-action='add']").one("click", appendAnswer);

Answer 1

使用事件委托

$("#answers").on("click", "button[data-action='add']",appendAnswer);

问题的原因是您在每个循环中的相同元素上绑定了多个事件，因此请删除那里的委托。

从.each() 循环中删除下面的这一行

$("#answers button[data-action='add']").one("click", appendAnswer);

DEMO

Answer 2

这是一个有效的解决方案http://jsfiddle.net/jrxeua6L/4/

var answers = [{
            order: 1,
            content: "placeholder"
        }],
            appendAnswer = function() {

            answers.push({
                order: answers.length + 1,
                content: $(this).parent().prev().val()
            });

            $("#answers").empty();

            $.each(answers, function(key, value) {
                $("#answers").append('<div class="input-group"><input type="text" class="form-control" placeholder="Enter your answer"><span class="input-group-btn"><button type="button" class="btn btn-default" title="Add a question" data-action="add"><span class="glyphicon glyphicon-plus"></span></button><button type="button" class="btn btn-default" title="Delete this question" data-action="delete" disabled><span class="glyphicon glyphicon-trash"></span></button></span></div>');

                //$("#answers button[data-action='add']").on("click", appendAnswer);
            });
        };

        $('body').on("click", "#answers button[data-action='add']", appendAnswer);

Answer 3

改变这一行：

$("#answers button[data-action='add']").one("click", appendAnswer);

到这里：

$("#answers button[data-action='add']").off("click").one("click", appendAnswer);