Question

如果你转到下面的JSFiddle。添加两个项目，然后在控制台中的一个项目上按“完成”，它会两次注销相同的按钮。我无法弄清楚原因。

我在这里做错了什么！：）

HTML

    <input id="inputAdd" type="text" name="" value="">
    <button id="submitItem" type="button" name="button">Add</button>

    <!-- Start of list -->
    <ul id="listContent"></ul>
    <!-- End of list -->

    <!-- Start of completed -->
    <div id="completed">
        <h4>Completed</h4>
    </div>
    <!-- End of completed -->

JS

$(document).ready(function(){

(function() {
    var itemTracker = {
        // init
        init: function() {
            this.bindEvents();
        },

        // cacheDom
        cacheDom: {
            inputAdd: $('#inputAdd'),
            submitAdd: $('#submitItem'),
            listContent: $('#listContent'),
            completed: $('#completed')
        },

        // Add item
        addItem: function() {
            var itemValue = this.cacheDom.inputAdd.val();
            var listItem = $("<li></li>");
            var buttonRemove = '<button class="remove">Remove</button>';
            var buttonComplete = '<button class="complete">Complete</button>';
            listItem.append(itemValue);
            listItem.append(buttonRemove);
            listItem.append(buttonComplete);
            var itemContent = this.cacheDom.listContent.append(listItem);
            this.cacheDom.inputAdd.val("");

            // Remove item
            var remove = $('.remove');
            remove.on("click", function(e){
                $(e.target).closest("li").hide();
            });

            var complete = $(".complete");

            // Complete item
            var completedItem = function(e) {
                console.log(this);

                // var childParent = $(this).parent();
                // var rootParent = childParent.parent();
                // var parentId = rootParent.prop('id');
                //
                // if(parentId === "listContent") {
                //     $('#completed').append(listItem);
                // } else {
                //     $('#listContent').append(listItem);
                // }
            };
            complete.on("click", completedItem);
        },

        // Bind Events
        bindEvents: function() {
            this.cacheDom.submitAdd.on("click", this.addItem.bind(this));
        }
    };

    itemTracker.init();

})();

});

Answer 1

原因是您已将类名绑定到click事件;表示事件处理程序针对具有类名完整的多个HTML元素触发。

由于您在事件处理函数中有 e 参数，请尝试使用e.target来提供单击的元素。

var completedItem = function(e) {
    console.log(e.target);
}

Answer 2

这是因为每次添加新项目时，您都会获得带有.complete var complete = $(".complete");类的按钮 ALL 并向其添加操作。

因此，如果你添加1个按钮：它只会触发一次。如果添加2个按钮：第一个按钮将触发两次，第二个按钮触发一次。如果添加3个按钮：第一个按钮将触发三次，第二次触发两次，第三次触发一次。等...

您可以通过替换var complete = $(".complete");来修复它对于：var complete = $(listItem).find(".complete") 在第36行。

这将确保它只选择您当时正在创建的listItem中的.complete按钮。

Answer 3

在您的代码中，您使用var complete = $(".complete");查找完整按钮。因此，当您添加第二个条目时，$(".complete");将返回2个元素，这也将事件附加到较早的节点。你可以做什么包装jquery中的完整按钮，如

var buttonComplete = $('<button class="complete">Complete</button>')

并使用此buttonComplete附加click事件。

buttonComplete.on("click", completedItem);

＆＃13;

$(document).ready(function(){

(function() {
    var itemTracker = {
        // init
        init: function() {
            this.bindEvents();
        },

        // cacheDom
        cacheDom: {
            inputAdd: $('#inputAdd'),
            submitAdd: $('#submitItem'),
            listContent: $('#listContent'),
            completed: $('#completed')
        },

        // Add item
        addItem: function() {
        		var index=this.cacheDom.listContent.children().length;
            var itemValue = this.cacheDom.inputAdd.val();
            var listItem = $("<li></li>");
            var buttonRemove = '<button class="remove">Remove</button>';
            var buttonComplete = $('<button class="complete">Complete</button>')
            listItem.append(itemValue);
            listItem.append(buttonRemove);
            listItem.append(buttonComplete);
            var itemContent = this.cacheDom.listContent.append(listItem);
            this.cacheDom.inputAdd.val("");

            // Remove item
            var remove = $('.remove');
            remove.on("click", function(e){
                $(e.target).closest("li").hide();
            });

            var complete = $(".complete");

            // Complete item
            var completedItem = function(e) {
                console.log(this);

                // var childParent = $(this).parent();
                // var rootParent = childParent.parent();
                // var parentId = rootParent.prop('id');
                //
                // if(parentId === "listContent") {
                //     $('#completed').append(listItem);
                // } else {
                //     $('#listContent').append(listItem);
                // }
            };
            buttonComplete.on("click", completedItem);
        },

        // Bind Events
        bindEvents: function() {
            this.cacheDom.submitAdd.on("click", this.addItem.bind(this));
        }
    };

    itemTracker.init();

})();

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
        <input id="inputAdd" type="text" name="" value="">
        <button id="submitItem" type="button" name="button">Add</button>

        <!-- Start of list -->
        <ul id="listContent"></ul>
        <!-- End of list -->

        <!-- Start of completed -->
        <div id="completed">
            <h4>Completed</h4>
        </div>
        <!-- End of completed -->

＆＃13;

单击按钮时触发两次

3 个答案: