CODEWITHSUNDEEP
javascripthtmljquerycss
arbis
arbis

Reputation: 1950

Why does my button not click when I change its id attribute?

I changed the attribute id of a button. The old id #slide_save_button has a light blue color, and the new id #slide_save_button_open has a dark blue color, which changes when it is supposed to. But when I attempt to click the button (by referring to its new id #slide_save_button_open) it won't execute the console.log("clicked"). Why?

$("#catName").on("input", function(){
  if( $("#catName").val().length > 0 ){
    $("#slide_save_button").attr('id', 'slide_save_button_open');
  } else {
    $("#slide_save_button_open").attr('id', 'slide_save_button');
  }
});



$("#slide_save_button_open").on("click", function(){
  console.log("clicked");
});

Upvotes: 0

Views: 187

Answers (3)

epascarello
epascarello

Reputation: 207511

Your approach fails because the code looks for the element at that moment in time. When it finds it, it binds it. The code does not keep looking for elements.

To do it your way, you would need to use event delegation.

$("#catName").on("input", function() {
  if ($("#catName").val().length > 0) {
    $("#slide_save_button").attr('id', 'slide_save_button_open');
  } else {
    $("#slide_save_button_open").attr('id', 'slide_save_button');
  }
});

$(document).on("click", "#slide_save_button_open", function() {
  console.log("clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
  <label for="catName">Name:</label>
  <input id="catName" name="catName"/>
  <button type="button" id="slide_save_button" name="slide_save_button">Run</button>
</form>

Now changing the id is not really the best solution. You probably should just take a "validation" approach and use a variable to hold the state or you can use a class.

const btn = $("#slide_save_button");

$("#catName").on("input", function() {
  btn.toggleClass("open", $("#catName").val().length > 0);
});

btn.on("click", function() {
  if (btn.hasClass("open")) {
    console.log("clicked");
  } else {
    console.log("need to fill in");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
  <label for="catName">Name:</label>
  <input id="catName" name="catName" />
  <button type="button" id="slide_save_button" name="slide_save_button">Run</button>
</form>

But you could just use HTML5 validation

const form = $("#myForm");
form.on("submit", function (evt) {
  evt.preventDefault();
  console.log("clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
  <label for="catName">Name:</label>
  <input id="catName" name="catName" required/>
  <button type="submit" id="slide_save_button" name="slide_save_button">Run</button>
</form>

Upvotes: 1

jonu29
jonu29

Reputation: 399

Base on this https://stackoverflow.com/a/27041899/15924734 it's not ok to change ID attribute. For what you need, you can use addClass(), removeClass() & toggleClass()

Also for dynamic elements you can use this:

$(document).on("click", "#test-element", function() {
   console.log("clicked");
});

Upvotes: 0

Quentin
Quentin

Reputation: 943562

$("#slide_save_button_open") searches the DOM for an element which has that ID right now. You then add an event handler to it.

When you later change the ID, it doesn't retroactively delete the existing event handlers and rerun the original code to attach new ones.

You can achieve something like that with event delegation where you bind the event handler to an ancestor element and listen for a bubbled event.

$(document).on("click", "#slide_save_button_open", function () { .... });

You could also test for something about the element inside the event handler:

$("#slide_save_button").on("input", function(e) {
    if ( $(e.currentTarget).attr('id') === 'slide_save_button_open') {

That said, I'd recommend testing a different feature of the element and not changing the ID. It's still the same thing even if it is in a different state.

Take a look at the Navigation Menu Button Example. You could make use of aria-expanded="true".

Upvotes: 1

Related Questions