How to get element by id after id dynamically added to element?

Question

I have a button with empty id attribute. I want to get <a> by id that added dynamically to it.

note : I don't want to use createElement() to add <a>.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <a id="" class="btn" href="#"><button>Green</button></a><br><br>
  <a id="changeId" href="#"><button>Change Id!</button></a>
</body>
</html>

JS

$(document).ready(function() {

  $("a#green").on("click", function(){
    $("body").css("background-color","green");
  });
  $("a#changeId").on("click", function(){
    $("a.btn").attr("id","green");
  });

});

Here is my code on jsFiddle

Mamun · Accepted Answer · 2018-07-23T12:09:52.783

Since id is being created through another event, you can use event-delegation approach:

$("body").on("click","a#green", function(){

$(document).ready(function() {

  $("body").on("click","a#green", function(){
    $("body").css("background-color","green");
  });
  $("a#changeId").on("click", function(){
    $("a.btn").attr("id","green");
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <a id="" class="btn" href="#"><button>Green</button></a><br><br>
  <a id="changeId" href="#"><button>Change Id!</button></a>
</body>

score 0 · Answer 2 · answered Jul 23 '18 at 12:02

Okay:

 $(document).ready(function() {

      $("a#changeId").on("click", function(){
        $("a.btn").attr("id","green");
        $("a#green").on("click", function(){
            $("body").css("background-color","green");
      });
      });
    });

score 0 · Answer 3 · answered Jul 23 '18 at 12:03

$(document).on("click", '#green', function(){}); is what you need. Because $("a#green") cannot be found because it is dynamically added to DOM. Or you can do some thing like $('body').on("click", '#green', function(){}); i.e. you need to take reference of static element. It can be any parent element of #green that is static.

$(document).ready(function() {
 $(document).on("click", '#green', function(){
   $("body").css("background-color","green");
  });
  $("a#changeId").on("click", function(){
   $("a.btn").attr("id","green");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="" class="btn" href="#"><button>Green</button></a><br><br>
  <a id="changeId" href="#"><button>Change Id!</button></a>

How to get element by id after id dynamically added to element?

3 Answers3