javascript - jQuery dialog is not working for element created dynamically -

i working jquery dialog. have 1 problem trying solve is:

i have created dialog on click of of anchor class , working. after have created 1 more anchor tag same class , on click of new created tag dialog not working.

here html:

<div id="loader_ajax"></div> <a id="show_hide_window1" class="show_hide_window" href=""> dialog </a> <div class="next_tg"></div> 

here jquery code:

$(function(){   $(".show_hide_window").click(function(){       showdialog();    });     $('.next_tg').html('<a class="show_hide_window" href=""> dialog created jquery </a>'); }); function showdialog() {      $("#loader_ajax").dialog({ modal: true, height: 400,width:650,title: title });       return false;            } 

i have tried delegation(event binding) not working. dynamically created anchor give error in console: typeerror: $(...).dialog not function

please help!!

you can binding click event elements present in dom when binding code executes. need event delegation dynamically created elements. need add newly create element dom, suppose want add loader_ajax

here static parent html element, in case loader_ajax

you code be

 $("#loader_ajax").on("click",".show_hide_window", function(){       showdialog();  });     var newtextboxdiv = $(document.createelement('div'));    newtextboxdiv.html('<a class="show_hide_window" href=""> dialog created jquery </a>');  $("#loader_ajax").append(newtextboxdiv); 

delegated events

delegated events have advantage can process events descendant elements added document @ later time. picking element guaranteed present @ time delegated event handler attached, can use delegated events avoid need attach , remove event handlers.