CODEWITHSUNDEEP
jquery
Wahid Masud
Wahid Masud

Reputation: 1093

why jquery click event fires twice

This is my html: 

<a href="#" class="nav-links proceed button-success">
    <span class="menue-title" style="margin-right: 5px; margin-top: 3px;">Proceed</span>
    <i class="fas fa-forward"></i>
</a>

This is the jquery 

$('.proceed').on('click', function (e) {
    console.log(e.target.tagName);
});

And this is what is causing my problem

$('.proceed').trigger('click');

When i manually click on that button the event fires once. But when i call the trigger('click') function that click event fires twice.

A more detailed diagnosis:

When i click the button manually, console.log shows either A or SPAN or I only once (depending on which part of the button i'm clicking). But when i call the trigger function, console.log shows A twice.

I have tried these:

$('.proceed').off().on('click', function (e) {});
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;

But nothing solved the problem. What is actually causing the problem and how do i solve it? How do i make the trigger function fire the click event only once?

Upvotes: 0

Views: 52

Answers (1)

Batsheva Hansav
Batsheva Hansav

Reputation: 316

Make sure you don't have .proceed class twice in your html.

Upvotes: 1

Related Questions