时间戳

首页 > 解决方案 > 为什么当我复制我的“按钮”代码时，Jquery onclick 停止工作？

javascript - 为什么当我复制我的“按钮”代码时，Jquery onclick 停止工作？

问题描述

我的网站的一个页面上有一个“退出”按钮，但由于某种原因，每当我点击它时，本应触发的 Jquery 功能从未被触发。该按钮在我网站的其他页面上有效，我花了一段时间试图找出问题所在。

这是我的 Jquery 代码：

$(document).ready(function(){
    $("#signOut").on("click", function(){
        signout(); 
    });
});

经过一番调试后，我意识到如果我$("signOut").trigger("click")在控制台中这样做，则注销效果很好。css hover 和 active 正在按钮上工作，所以我非常困惑。然后我发现这个Jquery 按钮 click() 函数不起作用，解决方案对我有用。我将代码更改为

$("document").on('click', '#signOut', function () {}

它有效......但我的按钮不是动态创建的。

最终，我意识到我复制了 html 代码。我在我的 php 之前和我的 php 代码之后创建了我的按钮（这就是我没有看到它的原因）。在我摆脱重复之后，我的旧代码运行良好，但我仍然对它为什么会产生所有这些问题以及为什么动态创建的按钮解决方案有效感到困惑。

标签： javascriptjqueryhtmlbuttonduplicates

解决方案

您会看到上述行为，因为处理程序关联的级别之间存在一些差异click()，on()具体取决于处理程序关联的级别。

解释

  • click()处理程序通过 jQuery 与具有匹配 ID 的 DOM 元素相关联。如果您有重复的 ID，jQuery 会获取第一个 DOM 元素（因为 ID 需要是唯一的）并与处理程序关联，其余元素将被跳过。现在，当单击第二个或第三个元素时，肯定会生成事件，但会直接传播到父元素，因为没有与单击的 DOM 元素关联的处理程序。

  • click()处理程序关联在稍后动态添加 DOM 元素的情况下无效。这不是您的方案，仅供您参考。

  • on()与具有重复 ID 的 DOM 元素的父元素关联的处理程序（click事件）如上所述获取事件（该事件被传播到父元素）。然后它根据指定的 ID 进行匹配，而不考虑重复并执行处理程序。

  • 类似地，click()与具有重复 ID 的 DOM 元素的父元素关联的处理程序如上所述获取事件并执行处理程序。

上述解释不仅适用于click事件，也适用于其他事件类型。

建议

  • 避免在页面中使用重复的 ID。如果您仍然有某种重复，请按类选择类并关联处理程序。否则，将处理程序关联到父元素并按 ID、类、元素名称等匹配子元素。

  • 如果您动态创建 DOM 元素，请与父元素进行处理程序关联，并按 ID、类、元素名称等匹配子元素。

例子

在下面的示例中：

  • 单击时Button 1，您会看到来自 3 个位置的日志：button specific handler、parent specific handler和parent general handler
  • 单击时Button 2，您只会看到来自 2 个地方的日志：parent specific handler和parent general handler.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Click Events</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#b1").click(function () {
                console.log("From specific handler: " + this.innerHTML);
            });
            $("#p").on("click", "#b1", function () {
                console.log("From parent specific(b1) handler: " + this.innerHTML)
            });
            $("#p").click(function () {
                console.log("From parent general handler: " + this.innerHTML)
            });
        });
    </script>
</head>

<body>
    <div id="p">
        <button id="b1">Button 1</button>
        <button id="b1">Button 2</button>
    </div>
</body>

推荐阅读