单击时触发两次HTML按钮

Question

我找到了其他相关的问题，但没有一个答案实际上解决了我的问题。这个按钮在IE上很好用，但在Chrome上不行。我尝试移除span元素，将按钮放在任何其他标记之外，但仍然触发了两次。这个temple扩展了一个'base.html'文件，代码位于'main'元素中。

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');
        });
});

Answer 1

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

如果您正在编译脚本，请检查脚本在编译期间没有重复。

此外，您也可以在ready函数之外设置click事件。如果解决了这个问题，那么jQuery很可能被加载了两次。