Question

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

我在点击锚类及其工作时创建了对话框。在此之后我创建了一个具有相同类的锚标记，并且单击该新创建的标记对话框不起作用。

这是html：

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

这是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;           
}

我已经尝试过委托（事件绑定）它无法正常工作。对于动态创建的锚，它在控制台中给出错误：TypeError：$（...）。dialog不是函数

请帮忙!!谢谢

Answer 1

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

此处静态父级可以是任何html元素，在您的情况下，它将是loader_ajax

您的代码将是

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

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

Answer 2

在事件上使用。这将管理动态添加的元素。

$(function(){

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

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



});

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

参考：In jQuery, how to attach events to dynamic html elements?

Answer 3

我是用我自己的代码制作的。现在，对话框成功处理动态创建的元素。 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对话框不适用于动态创建的元素

3 个答案: