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 :)
5 answers
solution1
30 2014-03-13 09:03:12
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.
solution2
16 2014-03-13 09:02:51
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
solution3
6 2014-03-13 09:05:53
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
solution4
2 2014-03-13 09:05:28
You code should work
$(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");
});
});
solution5
-1 2020-04-27 13:52:34
$('#main_body').append("something").ready(() => {
$('#but').click(() => {
})
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.