How to select element by id which added using insertAfter?

user_16267101 0
Viewed 38

Using jquery I added an HTML button using insertAfter() now I would Like to select that button by id but didn't work.

$("button").click(function(){
  $("<button id='new-button'>Added Button</button>").insertAfter("#this");
});
$("#new-button").click(function(){
  $("<span> #new-button-work</span>").insertAfter("#this");
})
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<button id="this">Insert span element after this element</button>

</body>
</html>

html jquery javascript
2 Answers

Because of new-button is inserted after script run so you can try this

$("button").click(function(){
  $("<button id='new-button'>Added Button</button>").insertAfter("#this");
});
$("body").on("click", "#new-button", function(){ <--
  $("<span> #new-button-work</span>").insertAfter("#this");
})
user_195087120

Because you're dynamically adding new elements to the DOM you should use event delegation - attaching listeners to a parent element (like document), and then using the 2nd argument of the on method to identify the element you want to match.

$(document).on('click', '#this', function() {
  const button = '<button id="new-button">Added Button</button>';
  $(button).insertAfter('#this');
});

$(document).on('click', '#new-button', function() {
  const span = '<span> #new-button-work</span>';
  $(span).insertAfter('#this');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="this">Insert span element after this element</button>

user_13770020
Related