CODEWITHSUNDEEP
javascripthtmljquerydjango-templates
1nfern0
1nfern0

Reputation: 147

HTML button triggered twice on click

I found other related questions but none of the answers there actually fixed my problem. The button works fine on IE, but not on Chrome. I tried removing the span element, putting the button outside any other tags, and still fires twice. This temple extends a 'base.html' file and the code is inside a 'main' element.

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

Upvotes: 1

Views: 726

Answers (1)

Bread
Bread

Reputation: 11

Use the chrome dev tools to check if you are loading your script or jquery twice. I'm not sure about chrome, but in Firefox dev tools you will be able to see if the event is being applied to the element twice by inspecting the element directly.

If you are compiling your script, check that the scripts aren't being duplicated during compilation.

Also, you can probably set your click event outside of the ready function. If that solves it, it's likely that jQuery is being loaded twice.

Upvotes: 1

Related Questions