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

Question

原始的小提琴例子

动态创建对话框的失败示例

我得到了这个脚本，用于将AJAX内容加载到jQuery UI对话框中，该对话框在小提琴示例中的名称为.open_dia 。 问题是，我在(window).bind(“load”, function(){} event中将.open_dia动态加载到页面中，所以我想知道如何从

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

对某事有影响

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

这样我就可以将事件绑定到动态创建的元素.open_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;
        });
    });
});

失败的代码：

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

HTML示例：

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

Answer 1

嗨，我分叉了您的解决方案，并对您的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;

    });       
});

我修改后的JS小提琴在这里： http : //jsfiddle.net/91nc1k1t/2/

如果您只希望一次加载每个对话框的内容，请参阅以下分叉提琴的更新： http : //jsfiddle.net/91nc1k1t/5/

Answer 2

您可以使用此：

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

Answer 3

如果目标DOM element是动态生成的，则没有问题。 为了使其正常工作，请确保事件处理程序已在容器元素（动态创建的元素的父元素）的click事件上注册。 这样可以解决问题！