jQuery dialog is not working for element created dynamically

Question

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

Adil · Answer 1 · 2015-05-12T10:42:43.347

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.

Nope, its not working! on click of dynamic created anchor it give error in console: TypeError: $(...).dialog is not a function — Iffi, May 12 '15 at 10:25

score 0 · Answer 2 · edited May 23 '17 at 10:24

0

Use on Event. This will manage dynamically added elements.

$(function(){

    $('body').on('click', '.show_hide_window', function() {
        showDialog();
})

   $('.next_tg').html('<a class="show_hide_window" href=""> Dialog Created By Jquery </a>');



});

Fiddle : http://jsfiddle.net/fqt0yztb/

Reference : In jQuery, how to attach events to dynamic html elements?

edited May 23 '17 at 10:24

Community

1
1

answered May 12 '15 at 10:54

Abdul Rehman Sayed

6,532
7
45
74

score 0 · Answer 3 · answered May 12 '15 at 11:15

I have make it from my own code. Now dialog successfully working for dynamically created element. fiddle

$(document).on('click', '.show_hide_window', function (evt) {
     var dialog = $('<div></div>').append('<img src="../images/themeroller.gif"/>');
     var getContentUrl = $(this).attr('href');
     dialog.load(getContentUrl + ' #content').dialog({
            title: $(this).attr('title'),
            modal: true, 
            height: 400,
            width:650
      });
     dialog.dialog('open');
     return false;
});

jQuery dialog is not working for element created dynamically

3 Answers3