refresh DOM after append element

Question

<!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>

Why alert doesn't work after append DOM? Should shows "bla bla" after click on it.

SOLVED

Main problem was with it:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

jquery was too old I think

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

solved problem :)

If you solved your question, you should add an answer. Your question is no longer a question and therefore is useless now! — Liam, Mar 13 '14 at 10:30
This question appears to be off-topic because it is no longer a question. Op has deleted all the question and replaced with his answer — Liam, Mar 13 '14 at 10:30

Adil · Answer 1 · 2014-03-13T09:09:33.760

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.

Problem was with it: jquery was too old I think solved problem :) — user3345547, Mar 13 '14 at 09:46

score 17 · Answer 2 · answered Mar 13 '14 at 09:02

You need to use event delegation for dynamically added element.

$(document).ready(function() {
    $('#main_body').append("<h1>Hello</h1><input id=\"but\" type=\"button\">Click");
    $('#main_body').on('click', '#but', function() {
        alert( "bla bla" );
    });
});

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all children matching a selector, whether those children exist now or are added in the future

score 7 · Answer 3 · answered Mar 13 '14 at 09:05

Use like this

<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>

    $(document).ready(function () {
        $('#main_body').append("<h1>Hello</h1><input id=\"but\" type=\"button\">Click");
        $(document).on("click", "#but", function () {
            alert("bla bla");
        });
    });

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

you should use event delegation for that

It helps you to attach handlers for the dynamically created elements

Problem was with it: jquery was too old I think solved problem :) — user3345547, Mar 13 '14 at 09:46

score 3 · Answer 4 · answered Mar 13 '14 at 09:05

3

You code should work

Fiddle Demo

$(document).ready(function () {
    $('#main_body').append("<h1>Hello</h1><input id=\"but\" type=\"button\">Click");
    $("#but").on("click", function () { //element is in DOM now as it added in previous statement
        alert("bla bla");
    });
});

answered Mar 13 '14 at 09:05

Tushar Gupta - curioustushar

58,085
24
103
107

Problem was with it: jquery was too old I think solved problem :) – user3345547 Mar 13 '14 at 09:47
@user3345547 Glad you found the solution :).Your code was correct as i pointed in my answer . :) – Tushar Gupta - curioustushar Mar 13 '14 at 09:54

score -2 · Answer 5 · edited May 05 '21 at 14:26

-2

$('#main_body').append("something").ready(() => {
  $('#but').click(() => {
  }) 
});

edited May 05 '21 at 14:26

General Grievance

4,555
31
31
45

answered Apr 27 '20 at 13:52

Ray Anthony Solon

1
1

4

Answers without explanation are downvoted more often than those with just code. Also `.ready`, no matter what it's called on, is always the same as `$(document).ready`. In other words, it's not solving any problems here that the OP's code (updated to a more recent version of jQuery) doesn't already do. – Heretic Monkey Apr 27 '20 at 13:57
I am having the same issues back then. I wasnt able to call elements that are just appended recently. So i found out that after appending and after the dom is loaded that is the time u can call them. Atleast for me. – Ray Anthony Solon Apr 30 '20 at 06:16

refresh DOM after append element

5 Answers5

Linked

Related