Question 36835 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to select element by id which added using insertAfter? – Jquery

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>
Tags:

2

Answers


  1. 0

    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");
})
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search