Best IT Recipes

Refresh DOM after adding item

Why does the alert not work after adding the DOM? Should show "blah blah" after clicking on it.

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

SOLVE

The main problem was with this:

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

resolved problem :)

+17
javascript jquery
Mar 13 '14 at 9:01
source share
4 answers

For dynamically added elements you need to delegate events, use a different version in jQuery on () , you can delegate the event to the static parent of 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 handle events from descendant elements that will be added to the document later. From selecting an item that is guaranteed to be present during a delegated event handler, you can use delegated events to avoid the need to frequently attach and remove event handlers, jQuery Docs

Your code works here because it is that you add a dynamic element before binding the event, but using event delegation will free you from the sequence that you use to add dynamic elements.

+25
Mar 13 '14 at 9:03
source share

For a dynamically added item, you must use event delegation .

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

The delegation event allows us to attach one event listener to the parent element, which will fire for all children matching the selector, whether these children exist now or are added in the future

+13
Mar 13 '14 at 9:02
source share

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 this

This will help you attach handlers to dynamically created elements.

+6
Mar 13 '14 at 9:05
source share

You must work

Screenshot

 $(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"); }); });
+2
Mar 13 '14 at 9:05
source share


More articles:


All Articles