Question

Failed example用于动态创建的对话框

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

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事件上注册。这将解决问题！

将click事件绑定到jQuery中动态创建的Dialog

3 个答案: