Class name added to an element using Jquery addClass is not detected when called using javascript onclick

Question

I have an input element

<input type="submit" id="btn-submit-id" 
  class="btn btn-success btn-submit-employee employee-tag" value="Submit">

and is called using javascript onclick pointing to its class name btn-submit-employee -

$(".btn-submit-employee").on("click", function(e){ e.preventDefault(); alert('submit'); });

When the submit button is clicked, I change its value to value="Update" and at the same time, calling the addClass and removeClass function adding btn-update-employee as one of its class names and removing the btn-submit-employee class name. When I click the button the second time, it should call the function

$(".btn-update-employee").on("click", function(e){ e.preventDefault(); alert('Update'); });

but still it calls the javascript function pointing to class name btn-submit-employee even after I removed the class name btn-submit-employee using removeClass function. What is the problem with this? Below is my complete code. Thanks a lot.

Html element:

<input type="submit" id="btn-submit-id" 
  class="btn btn-success btn-submit-employee employee-tag" value="Submit">

Javascript:

$(".btn-submit-employee").on("click", function(e){ 
  e.preventDefault(); 

  $("#btn-submit-id").val("Update");
  $(".btn-submit-employee").addClass("btn-update-employee");
  $(".btn-submit-employee").removeClass("btn-submit-employee");
  alert('submit'); 
 });

$(".btn-update-employee").on("click", function(e){ 
  e.preventDefault(); 
  alert('Update'); 
});

Jamiec · Accepted Answer · 2019-09-09 08:11:18Z

2

Event handlers added like that only get attached when the page is first loaded. To work how you expect you need to delegate the event handler to a higher element in the DOM - typically document itself but you can also use a surrounding element (like a 'div')

$(document).on("click",".btn-submit-employee", function(e){ 
  e.preventDefault(); 

  $("#btn-submit-id").val("Update");
  $(".btn-submit-employee").addClass("btn-update-employee");
  $(".btn-submit-employee").removeClass("btn-submit-employee");
  alert('submit'); 
 });

$(document).on("click", ".btn-update-employee",function(e){ 
  e.preventDefault(); 
  alert('Update'); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" id="btn-submit-id" class="btn btn-success btn-submit-employee employee-tag" value="Submit">

answered Sep 9, 2019 at 8:11

Jamiec

136k15 gold badges143 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

yunzen · Accepted Answer · 2019-09-09 08:24:35Z

1

This is because you create your on handler before there is an element with the class name of btn-update-employee, hence no element reacts to that event handler. furthermore the original element with class btn-submit-employee will still be the target to the original event.

So you need to delegate the event through bubbling. jQuery handles this quite smart. Just listen to the event on the document and add the selector as function parameter after the event name.

"use strict";
console.clear();

$(document).on("click", ".btn-submit-employee", function(e) {
  e.preventDefault();

  $("#btn-submit-id").val("Update");
  $(".btn-submit-employee").addClass("btn-update-employee");
  $(".btn-submit-employee").removeClass("btn-submit-employee");
  alert('submit');
});

$(document).on("click", ".btn-update-employee", function(e) {
  e.preventDefault();
  alert('Update');
});

.btn-submit-employee {
  background: blue;
  color: white;
  padding: 3px 8px;
}

.btn-update-employee {
  background: green;
  color: white;
  padding: 3px 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="submit" id="btn-submit-id" class="btn btn-success btn-submit-employee employee-tag" value="Submit">

You might want to read the documentation for jQuery's on

Delegated event handlers have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated event handlers to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.

edited Sep 9, 2019 at 8:24

answered Sep 9, 2019 at 8:10

yunzen

33.5k13 gold badges79 silver badges114 bronze badges

4 Comments

Salketer Over a year ago

No explaination at all? I'd expect more from 24k rep

yunzen Over a year ago

@Salketer This platform is all about speed. In the last few months the way you get your points changed a bit. Any person who gave a somewhat useful answer get's the points. If anyone gives a better answer some minutes later that asker seems not to be willing to revisit his own question. Since then I present an answer with working code fast and then edit the explanation afterwards. It's a pity, but that's my observation.

Salketer Over a year ago

I see. removing downvote since you edited. I come here to help the community, not rack in more point.

yunzen Over a year ago

@Salketer It's the same with me. But I want the asker to get useful answers. And in the CSS/JS field, speed is everything to be recognised, especially by low-points or new participants

Salketer · Accepted Answer · 2019-09-09 08:07:54Z

This happens because the event handler is added to the element. The class you use is just to find the target element. Your best bet is to use the same handler, with different state...

    $(".btn-submit-employee").on("click", function(e){ 
      e.preventDefault(); 
    
      if($(this).is(".btn-submit-employee")){
         $("#btn-submit-id").val("Update");
         $(".btn-submit-employee").addClass("btn-update-employee");
         $(".btn-submit-employee").removeClass("btn-submit-employee");
         alert('submit'); 
      }else{
         alert('Update'); 
      }
     
     });
    
    $(".btn-update-employee").on("click", function(e){ 
      e.preventDefault(); 
      
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" class="btn-submit-employee" id="btn-submit-id" value="Submit"/>

Collectives™ on Stack Overflow

Class name added to an element using Jquery addClass is not detected when called using javascript onclick

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related