Even after dynamically removing the class from the element, the Click event can still be detected

Question

Even after dynamically removing the class from the element, the Click event can still be detected

My buttons have a design like this:

<a class="h-modal-btn branch-modal-btn"> Buy Now </a>

The issue arises when I need to remove certain classes and add attributes to these buttons based on the query string in the URL. Skipping ahead, I simply used the following code:

$('a.branch-modal-btn').removeClass('h-modal-btn');

After verifying that the class was successfully removed using the developer tools, I realized that the following code still executed:

$('.h-modal-btn').on('click', function() {
    // Do something
)}

This situation is quite frustrating! Any assistance would be highly appreciated.

javascript html jquery css

Answer 1

Answer №1

The reason this isn't working is because you are attaching the event listener to the button before removing the class. This means that the listener is already in place before the class is removed, so changing the classname won't prevent the listener from being triggered.

To solve this issue, you will need to manually remove the listener from those elements. You can do this by using the unbind method or the newer off method.

$('a.branch-modal-btn').off("click").removeClass('h-modal-btn');

Answer 2

The reason this isn't working is because you are attaching the event listener to the button before removing the class. This means that the listener is already in place before the class is removed, so changing the classname won't prevent the listener from being triggered.

To solve this issue, you will need to manually remove the listener from those elements. You can do this by using the unbind method or the newer off method.

$('a.branch-modal-btn').off("click").removeClass('h-modal-btn');

Answer 3

Answer №2

Instead of:

$('.h-modal-btn').on('click', function() {
    // Do something
)}

try using this instead:

$(document).on('click', '.h-modal-btn', function() {
    // Do something
)}

Alternatively, you could consider using:

$('a.branch-modal-btn').off("click").removeClass('h-modal-btn');

Answer 4

Instead of:

$('.h-modal-btn').on('click', function() {
    // Do something
)}

try using this instead:

$(document).on('click', '.h-modal-btn', function() {
    // Do something
)}

Alternatively, you could consider using:

$('a.branch-modal-btn').off("click").removeClass('h-modal-btn');

Even after dynamically removing the class from the element, the Click event can still be detected

Answer №1

Answer №2

Similar questions

What is the process for converting/executing TypeScript into JavaScript?

Tokenizer method utilizing strings

Implementing Asynchronous Rendering in React Router 4

Is it possible for CSS to prevent the insertion of spaces?

Is it possible to extract a specific value from JSON data by making an AJAX call or applying a filter to the fetched JSON data?

The element type is not valid: it should be a string for built-in components or a class/function for composite components, but it is currently an object in a React project

Is there a way to retrieve the id of the parent element containing the PHP code using PHP?

Update your mappings for the city of Istanbul when utilizing both TypeScript and Babel

Angular.js filter issue: "Error: textProvider is not recognized provider"

Connecting Peers in Windows Store App using HTML/JS

What is the best way to access and verify data from an array that has been passed through props

How do you vertically span a grid element across 3 rows using Material UI?

Modify the text field's color when it is in a disabled state

Tips for Creating a Responsive Homepage

The tag's onclick function that was dynamically created was not triggering in jQuery

Can a Node.js dependent library be integrated into Cordova?

Is it just me or does my wrapper always hover above the bottom of the screen?

Struggling with passing parameters through a route and displaying them in the Reddit app using React?

Error encountered while attempting to obtain OAuth2 API authorization token in ExpressJS Node.js Angular: "getaddrinfo ENOTFOUND"

Limit input to numbers only in Semantic UI React Form Field