Simple Javascript Jquery not working -
this question has answer here:
one button, when clicked, changes html in body tag, in there new button. new button, when clicked, should give alert message, not.
i think it's document.ready part, needs reinitialized. don't know how that. please check code:
<!doctype html> <html> <head> <title>title website</title> <script src="js/jquery-2.1.4.min.js"></script> </head> <body> <div id="bigbox"> <button id="idol">idol</button> </div> <script> $(document).ready(function(e){ $('#idol').click(function(event) { console.log("success"); var x = '<button id="clickhere">click here!</button></div></div>'; $('#bigbox').html(x); }); $('#clickhere').click(function(event) { alert('this working'); }); }); </script> </body> </html>
this cut down version of code. in original page, button generates html through ajax call, , html has button ajax call.
use event delegation
follow:
$(document).on('click', '#clickhere', function(event) { alert('this working'); });
this happened because button dynamically added, wasn't in dom. event delegation ensure event delegated document button.
Comments
Post a Comment