javascript - 标签仅适用于双击，不适用于单击

Question

嗨，我有一个 <a>双击有效但单击无效的标记。我在标签上调用了一个 JavaScript 函数。

有人可以帮忙吗？

下面是标签和 JavaScript 函数

function ShowPopup() { 
    $("#lnkAttachment").on("click", function () {
        $('#divProjectAttachment').modal('toggle');
    });
}

<a>href="javascript:void(0);" id="lnkAttachment" onclick="ShowPopup();">Click here to View Attachments!</a>

Answer 1

您正在 ShowPopup 函数中附加事件监听器。只需将其更新为类似

function ShowPopup() { 
    $('#divProjectAttachment').modal('toggle');
}

它会工作得很好。

编辑:

为什么会发生这种情况？

嗯，首先，这适用于第二次点击，而不是 double click .

下一步，

您已附加onclick <a></a> 中的事件处理程序标签。哪个触发 ShowPopup功能。在你的ShowPopup里面您将单击事件监听器附加到同一元素的函数。因此，当您第一次单击 anchor 标记时，ShowPopup 会将事件监听器附加到 #lnkAttachment 。这里需要注意的重要一点是，您的 ShowPopup 函数会在第一次单击时被调用。但它不会向您显示弹出窗口，因为您将事件监听器附加到元素，仅此而已。现在，第一次调用 ShowPopup 后会附加事件监听器。下次当您点击lnkAttachment时事件监听器已经存在，因此它将显示弹出窗口。此外，它将再次重新附加单击事件监听器(并且每次调用 ShowPopup 时 - 这是不必要的)。

您可以保留您的代码，如本答案所示

或者

您可以决定遵循良好的编程精神，并将事件附件 (JavaScript) 与显示标记 (HTML) 分开实现方法如下。

将 anchor 标记保留为

href="javascript:void(0);"id="lnkAttachment">点击此处查看附件!

(注意，此处没有 onclick 事件处理程序)

并在您的 JavaScript 中负责事件处理。

$(document).on('ready', function(){
    $("#lnkAttachment").on("click", function () {
        $('#divProjectAttachment').modal('toggle');
    });
}