Javascript 将单击事件绑定到jQuery中动态创建的对话框

用于动态创建的对话框

我得到这个命令是为了将AJAX内容加载到一个jQueryUI对话框中，该对话框的类名为

。问题是我将
.open_dia
动态加载到
（窗口）.bind（“load”，function（）{}事件
）中的页面中，因此我想知道如何从

var $link = $(this).one('click', function(){....

对某事的影响

var $link = $('.area').one('click','.open_dia', function() {

这样我就可以将事件绑定到动态创建的元素
。打开\u dia
打开对话框。如有任何帮助，将不胜感激

以下是原始代码：

$(document).ready(function() {
    var $loading = $('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" alt="loading" class="loading">');

    $('.open_dia').each(function() {
        var $dialog = $('<div></div>')
            .append($loading.clone());
        var $link = $(this).one('click', function() {
            $dialog
                .load($link.attr('href') + ' #content')
                .dialog({
                    title: $link.attr('title'),
                    width: 500,
                    height: 300
                });

            $link.click(function() {
                $dialog.dialog('open');

                return false;
            });

            return false;
        });
    });
});

$（文档）.ready（函数（）{
变量$loading=$（''）；
$（'.open_dia'）。每个（函数（）{
变量$dialog=$（''）
.append（$loading.clone（））；
var$link=$（this）.one（'click'，function（）{
$dialog
.load（$link.attr（'href'）+'#content'））
.对话({
标题：$link.attr（'title'），
宽度：500，
身高：300
});
$link.click（函数（）{
$dialog.dialog（'open'）；
返回false；
});
返回false；
});
});
});

失败代码：

$(document).ready(function(){

    $('button').one('click',function(){
     $(this).next('.area').append('<a class="open_dia" title="this title" href="http://jsfiddle.net/">Click</a>');
});
    var $loading = $('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" alt="loading" class="loading">');
        $('.open_dia').each(function() {
            var $dialog = $('<div></div>')
                .append($loading.clone());
            var $link = $('.area').one('click','.open_dia', function() {
                $dialog
                    .load($link.attr('href') + ' #content')
                    .dialog({
                        title: $link.attr('title'),
                        width: 500,
                        height: 300
                    });
                $link.click(function() {
                    $dialog.dialog('open');

                    return false;
                });

                return false;
            });
        });
    });

$（文档）.ready（函数（）{
$（'button'）。一个（'click'，函数（）{
$（this）.next（'.area'）.append（''）；
});
变量$loading=$（''）；
$（'.open_dia'）。每个（函数（）{
变量$dialog=$（''）
.append（$loading.clone（））；
var$link=$（'.area'）.one（'click'，'open_dia'，function（）{
$dialog
.load（$link.attr（'href'）+'#content'））
.对话({
标题：$link.attr（'title'），
宽度：500，
身高：300
});
$link.click（函数（）{
$dialog.dialog（'open'）；
返回false；
});
返回false；
});
});
});

HTML示例：

<button>Append open_dia</button>
<div class='area'></div>

Append open\u dia
如果动态生成目标DOM
元素，则没有问题。要使其正常工作，请确保事件处理程序已在容器元素（动态创建元素的父元素）的单击事件上注册。这将解决问题！
您可以使用以下方法：

<button>Append open_dia</button>
<div class='area'><a style="display: none;" class="open_dia"></a></div>

Append open\u dia
您好，我已经提出了您的解决方案，并对您的javasript进行了如下修改：

var loading = $('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" alt="loading" class="loading">');

    $(document).ready(function () {
        $('button').click(function () {     
            $(this).next('.area').append('<a class="open_dia" title="this title" href="#">Click</a>');        
        });

    $(document).on('click', '.open_dia', function (evt) {
        var dialog = $('<div></div>').append(loading.clone());

        dialog.load($(this).attr('href') + ' #content').dialog({
                title : $(this).attr('title'),
                width : 500,
                height : 300
        });

        dialog.dialog('open');
        return false;

    });       
});

var加载=$（''）；
$（文档）.ready（函数（）{
$（'button'）。单击（函数（）{
$（this）.next（'.area'）.append（''）；
});
$（文档）。在（'单击'，'上。打开直径'，函数（evt）{
var dialog=$（''）.append（loading.clone（））；
加载（$（this.attr（'href'）+'#content'）。对话框({
标题：$（this.attr（'title'），
宽度：500，
身高：300
});
dialog.dialog（“打开”）；
返回false；
});       
});

我修改过的JS小提琴在这里：

如果您只想加载每个对话框的内容一次，请参阅forked fiddle的此更新：
为什么尝试使用
.one（）
而不是
.on（）
？@DevlshOne，最初的版本使用
one
来确保AJAX内容只加载一次。我也想这样做。谢谢。我如何使用
one
和
on
来确保AJAX内容只在第一次单击时加载？我已经将其从
on
更改为
one
，但这不起作用。对话框仅限于y打开一次。