jQuery对话框不适用于动态创建的元素

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

我正在使用jQuery对话框。我有一个问题,试图解决这个问题:

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:

这是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:

这是jQuery代码:

$(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

我已经尝试过委托(事件绑定)它不起作用。对于动态创建的锚,它在控制台中给出错误:TypeError:$(...)。对话框不是函数

Please help!! Thanks

请帮忙!!谢谢

3 个解决方案

#1

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

当绑定代码执行时,您当前可以将click事件绑定到DOM中存在的元素。您需要动态创建元素的事件委派。您还需要将新的create元素添加到DOM,假设您要添加到loader_ajax

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

这里静态父可以是任何html元素,在你的情况下它将是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.

委托事件的优点是,它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素,您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。

#2

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/

小提琴:http://jsfiddle.net/fqt0yztb/

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

参考:在jQuery中,如何将事件附加到动态html元素?

#3

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;
});

#1