javascript - refresh DOM after append element

Question

Welcome To Ask or Share your Answers For Others

javascript - refresh DOM after append element

asked Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

<!doctype html>
<html>

<head>
  <title>test</title>
  <meta charset="UTF-8">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#main_body').append("<h1>Hello</h1><input id="but" type="button">Click");
      $("#but").on("click", function() {
        alert("bla bla");
      });
    });
  </script>
</head>

<body id="main_body"></body>

</html>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1.1k views

1 Answer

深蓝 · Answer 1 · 2021-10-17T02:58:08+0000

For dynamically added elements you need event delegation, use the other version on jQuery on(), you can delegate event to static parent of the dynamically added elements. In your case you can use #main_body

$('#main_body').on( "click", "#but", function() {
    alert( "bla bla" );
});

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers, jQuery Docs

Your code works here as it is because you are adding the dynamically element before binding the event but using event delegation will free you from the sequence you use to add the dynamic elements.

Categories

javascript - refresh DOM after append element

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags