How do I fix jQuery attr ID change not working?

Question

Using jQuery 3.5.1 I try to change the ID on a button when another button is clicked, using $('#convertBtn').attr('id', 'convertBtnDownload'); but this is not working .. does anyone have an idea on why and how to fix this?

Working example:

$(document).ready(function() {

  $("#convertBtn").click(function() {

    console.log("Clicked")

    $("#convertBtnSpinner").show();
    $("#convertBtn").attr("disabled", true);
    $("#convertBtnText").html("Genererer <span class='dot dot1'>.</span><span class='dot dot2'>.</span><span class='dot dot3'>.</span>");
    document.documentElement.style.cursor = 'wait'

  });


  $("#convertBtnDone").click(function() {

    console.log("Done")

    $("#convertBtnSpinner").hide();
    $("#convertBtn").attr("disabled", false);
    $("#convertBtn").removeClass("btn-primary");
    $("#convertBtn").addClass("btn-success");
    $("#convertBtnText").html("Download PDF <i class='fas fa-download'></i>");
    $('#convertBtn').attr('id', 'convertBtnDownload');
    document.documentElement.style.cursor = 'default'

  });


  $('.convertBtnDownload').click(function() {
    $('#resultLink').click();
  });

});

.dot1 {
  animation: visibility 1.5s linear infinite;
}

@keyframes visibility {
  0% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.dot2 {
  animation: visibility2 1.5s linear infinite;
}

@keyframes visibility2 {
  0% {
    opacity: 0;
  }
  21% {
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.dot3 {
  animation: visibility3 1.5s linear infinite;
}

@keyframes visibility3 {
  0% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  44% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/e3a6e5f796.js" crossorigin="anonymous"></script>


<button id="convertBtn" class="btn btn-primary" style="width: 220px;" type="button">
<span id="convertBtnSpinner" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none;"></span>
<span id="convertBtnText">Generate PDF <i class="far fa-file-pdf"></i></span>
</button>
<br>
<br>
<button id="convertBtnDone" class="btn btn-primary" type="button">Swap ID</button>

Is `.convertBtnDownload` supposed to be `#convertBtnDownload`? Also note you are targeting dynamically added elements. Event handlers only bind to elements that exist at page load. If you come along later and add (or update) a button with an ID that did not exist at page load, your event handler for that ID will not work. You need to delegate your handlers, see eg https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements. — Don't Panic, Jun 13 '21 at 08:38
(Though in this case I'd suggest rethinking your flow/functionality so that you don't need to go changing elements might be a better approach?) — Don't Panic, Jun 13 '21 at 08:40
Hi @Don'tPanic .. you might be right regarding rethinking the functionality .. in the end the "Swap ID" button offcause will not be there, the jQuery part that this button at the moment does will be triggered by a jSON response so that instead of posting (this part is in a other script not posted here) I need the button to execute `$('#resultLink').click();` .. but at the moment I cannot see how I can do that without changing the ID on the button .. maybe I do not think right here :-) — Stig Kølbæk, Jun 13 '21 at 08:49
I have as you suggested @Don'tPanic rethought my solution and have found a better way to do it .. I will post my solution shortly .. Thanks :-) — Stig Kølbæk, Jun 13 '21 at 11:41

score 0 · Accepted Answer · answered Jun 13 '21 at 11:48

I have as @Don'tPanic suggested rethought my solution and have come up with a better and working solution:

Instead of the using the same button, I am hiding/showing different buttons depending on the state they need to be in:

<button id="convertBtn" class="btn btn-primary" style="width: 220px;" type="button">
  <span id="convertBtnSpinner" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none;"></span>
  <span id="convertBtnText">Generate PDF <i class="far fa-file-pdf"></i></span>
</button>

<div id="result" style="display: none;">
  <a class="btn btn-success" id="resultLink" href="#" style="width: 220px;" role="button">Download PDF <i class="fas fa-download"></i></a>
</div>

The jQuery used :

$( "#convertBtn" ).hide();
$( "#result" ).show();
$( "#resultLink" ).attr("href", "<PATH_TO_PDF>.pdf");
document.documentElement.style.cursor = 'hand'

How do I fix jQuery attr ID change not working?

1 Answers1