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

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -