我找到了其他相关的问题，但没有一个答案实际上解决了我的问题。这个按钮在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');
        });
});