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”并打开dailog框。当我点击第三次在警报中显示“aaa”两次。当我第三次点击时，它有时会在警报中显示“viewcard”，然后在警报中显示两到三次“aaa”。

你能帮我解决一些错误吗

Answer 1

您多次绑定事件。因此，你得到了这个结果。您可以使用.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()。

一般语法

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

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

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。

Answer 2

它的#ContactProfile是该标记的容器？

我问过，因为点击事件堆叠的原因可能是“事件冒泡”，这意味着当您单击“viewCard”时，其父级#ContactProfile也会被点击，再次调用clickedOnContactProfileCard并重新绑定“viewcard”上的click事件”

如果我是正确的，解决方案应该是在currObj点击事件函数结束时添加这一行

currObj.click(function (event) {
   ...
   event.stopPropagation();
});

请注意，我还添加了事件参数

抱歉英文不好，我希望我的回答可以帮助你...

点击事件直到我点击时再次附加点击事件

2 个答案: