The jQuery dialog box does not work for the dynamically created item

advertisements

I am working with jQuery dialog. I have one problem that trying to solve that is:

I have created the dialog on click of of anchor class and its working. Than after this I have created one more anchor tag with same class and on click of that new created tag dialog is not working.

Here is html:

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

Here is jQuery code:

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

I have already tried with delegation(Event binding) its not working. For Dynamically created anchor it give error in console: TypeError: $(...).dialog is not a function

Please help!! Thanks


You can currently binding click event to elements that are present in the DOM when binding code executes. You need event delegation for dynamically created elements. You also need to add the newly create element to DOM, suppose you want to add to loader_ajax

Here static parent could be any html element, in your case it would be loader_ajax

You code would 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 By Jquery </a>');
 $("#loader_ajax").append(newTextBoxDiv);

Delegated events

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.