将点击事件绑定到 jQuery 中动态创建的对话框答案

【问题标题】：Bind a click event to a dynamically created Dialog in jQuery将点击事件绑定到 jQuery 中动态创建的对话框
【发布时间】：2014-08-19 11:45:58
【问题描述】：

Original fiddle example

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

我得到了这个 script 来将 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>

【问题讨论】：

你为什么尝试使用.one()而不是.on()？
@DevlshOne，原来使用one 来确保AJAX 内容只加载一次。我也想这样做。

标签： javascript jquery html ajax jquery-ui

【解决方案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/

如果您只想加载每个对话框的内容一次，请参阅 fork fiddle 的此更新：http://jsfiddle.net/91nc1k1t/5/

【讨论】：

谢谢。如何使用one 和on 来确保仅在第一次点击时加载Ajax 内容？我已将其从 on 更改为 one 但这不起作用。该对话框仅打开一次。 Fiddle Example

【解决方案2】：

你可以用这个：

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

【讨论】：

【解决方案3】：

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

【讨论】：