单击时触发两次 HTML 按钮

Posted 2023-02-24

【中文标题】单击时触发两次 HTML 按钮

【英文标题】：HTML button triggered twice on click

【发布时间】：2021-06-27 14:27:25

【问题描述】：

我发现了其他相关问题，但那里的答案都没有真正解决我的问题。 该按钮在 IE 上可以正常工作，但在 Chrome 上不行。 我尝试删除 span 元素，将按钮放在任何其他标签之外，但仍然会触发两次。 这座寺庙扩展了一个“base.html”文件，代码位于一个“主”元素内。

HTML：

<div class="jumbotron p-4">
<div class="container-fluid">
    <h1 class="jumbotron-heading"> category.name </h1>
    <div>
        <strong id="like_count"> category.likes </strong> likes
        % if user.is_authenticated %
        <button id="like_btn" data-categoryid=" category.id " class="btn btn-primary btn-sm" type="button">
            <span data-feather="thumbs-up"></span>
            Like Category
        </button>
        % endif %
    </div>
</div>

JQuery：

$(document).ready(function() 
    $('#like_btn').click(function() 
          alert('button clicked');
        );
);

【问题讨论】：

你可以尝试在 ready 函数之后添加一个console.log('ready'): 来检查它是否被触发了两次。我无法重现您的问题。我怀疑，不知何故，这个脚本被包含了两次。

我认为和@Moritz 一样，因为我用你的代码（jsfiddle.net/2a18n6yz）创建了一个小提琴，但它对我有用。搜索检查器中是否有 2 次点击事件。

@Moriiz 谢谢。这实际上帮助我解决了这个问题，因为 Chrome 开发工具没有显示脚本是否加载了两次。我正在关注一个声称在正文末尾添加脚本有助于页面加载速度更快的教程。我找到了这个question 所以我将脚本移到了头部，这解决了问题。

【参考方案1】：

使用 chrome 开发工具检查您是否正在加载脚本或 jquery 两次。我不确定 chrome，但在 Firefox 开发工具中，您将能够通过直接检查元素来查看事件是否被应用到元素两次。

如果您正在编译脚本，请检查脚本在编译期间是否被复制。

此外，您还可以在 ready 函数之外设置点击事件。如果这样解决了，很可能 jQuery 被加载了两次。

【讨论】：

如果脚本加载两次，chrome 开发工具不会显示。我不知道为什么，但在 body 标签中包含脚本会导致问题。

什么版本的jQuery？

jQuery的版本是3.3.1。