javascript - 当我单击时，通过 on 的单击事件会一次又一次附加单击事件

Question

我有以下 html

<div class="connect">
                <ul>
                    <li><a href="#">Assign a Task</a></li>
                    <li><a attr="viewCard" href="#">View Card</a></li>
                    <li><a href="#">Edit</a></li>
                </ul>
            </div>

我写了一些 javascript

$MyContacts = function () {

    var attachEvents = function () {
        $("#ContactProfile").on("click", clickedOnContactProfileCard);

    };

    var clickedOnContactProfileCard = function (event) {
        if (event.target.localName.toLowerCase() == "a") {

            var currObj = $(event.target);

            alert(currObj.attr("attr").toLowerCase());
            if (currObj.attr("attr").toLowerCase() === "viewcard") {
                currObj.click(function () {
                    alert("aaa");
                    $("#dialog-form").dialog({
                        resizable: false,
                        zIndex: 9999,
                        fontSize: 5,
                        modal: true,
                        height: 300,
                        width: 350,
                        buttons: {
                            "Save": function () { }
                        },
                        Cancel: function () {
                            $(this).dialog("close");
                        },
                        close: function () {

                        }
                    });
                });
            }
        }
    };

    var returnElement = {
        attachEvents: attachEvents
    };

    return returnElement;
}();

当我第一次单击“viewCard”链接时，它在警报中仅显示“viewcard”。当我第二次单击时，它会在警报中显示“aaa”并打开对话框。当我第三次单击时，警报中显示“aaa”两次。当我第三次单击时，有时会在警报中显示“viewcard”，然后在警报中显示两到三次“aaa”。

你能帮我解决我犯的错误吗

Answer 1

您多次绑定(bind)事件。因此你得到了这个结果。您可以使用.off()删除事件处理程序。

您的直接解决方案是

currObj.off('click').click(function () { 

而不是

currObj.click(function () {

注意:我还建议您使用 data-* 前缀属性

<li><a attr="viewCard" href="#">View Card</a></li>

使用

<li><a data-attr="viewCard" href="#">View Card</a></li>

可以使用.data()检索

<小时/>

但是如果我的控件是动态的，那么我如何仅使用 .click() 附加事件。

您需要使用Event Delegation 。您必须使用.on()使用委托(delegate)事件方法。

一般语法

$(document).on(event, selector, eventHandler);

理想情况下，您应该将 document 替换为最接近的静态容器。

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.