原始小提琴的例子

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

我得到这个脚本来加载AJAX内容转换为jQuery UI的对话框，它的类被命名为 .open_dia 在小提琴的例子。问题是，我有 .open_dia 动态加载到页面的（窗口）.bind（负荷，函数（）{}事件，所以我想知道如何这条线从

 变量$链接= $（本）。一（'点击'，函数（）{....
 

要东西的效果

 变量$链接= $（'区'）。一（点击，。open_dia'，函数（）{
 

这样我就可以绑定事件动态创建的元素 .open_dia 打开对话框。任何帮助将是AP preciated。

下面是原来的code：

  $（文件）。就绪（函数（）{
    变量$负荷= $（'＆LT; IMG SRC =htt​​p://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gifALT =加载级=加载＆GT;'）;

    $（'。open_dia'）。每个（函数（）{
        变量$对话框= $（'＆LT; D​​IV＆GT;＆LT; / DIV＆GT;'）
            .append（$ loading.clone（））;
        变量$链接= $（本）。一（'点击'，函数（）{
            $对话框
                .load（$ link.attr（HREF'）+'＃内容）
                。对话（{
                    标题：$ link.attr（标题），
                    宽度：500，
                    身高：300
                }）;

            $ link.click（函数（）{
                $ dialog.dialog（'开'）;

                返回false;
            }）;

            返回false;
        }）;
    }）;
}）;
 

失败code：

  $（文件）。就绪（函数（）{

    $（'按钮'）。一（点击，函数（）{
     $（本）。接下来（'区'）追加（'＆LT;一类=open_dia称号=这个称号的href =htt​​p://jsfiddle.net/＆gt;点击＆LT; / A＆GT; ）;
}）;
    变量$负荷= $（'＆LT; IMG SRC =htt​​p://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gifALT =加载级=加载＆GT;'）;
        $（'。open_dia'）。每个（函数（）{
            变量$对话框= $（'＆LT; D​​IV＆GT;＆LT; / DIV＆GT;'）
                .append（$ loading.clone（））;
            变量$链接= $（'区'）。一（点击，。open_dia'，函数（）{
                $对话框
                    .load（$ link.attr（HREF'）+'＃内容）
                    。对话（{
                        标题：$ link.attr（标题），
                        宽度：500，
                        身高：300
                    }）;
                $ link.click（函数（）{
                    $ dialog.dialog（'开'）;

                    返回false;
                }）;

                返回false;
            }）;
        }）;
    }）;
 

例如HTML：

 ＆LT;按钮＆GT;附加open_dia＆LT; /按钮＆GT;
＆LT; D​​IV CLASS ='区域'＆GT;＆LT; / DIV＆GT;
 

解决方案

您好我已付出你的解决方案，并提出修改你的javasript如下：

 无功负荷= $（'＆LT; IMG SRC =htt​​p://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gifALT =装类=加载＆GT;'）;

    $（文件）。就绪（函数（）{
        $（按钮）。点击（函数（）{
            $（本）。接下来（'区'）追加（'＆LT;一类=open_dia称号=这个称号的href =＃＆gt;点击＆LT; / A＆GT;'）;
        }）;

    $（文件）。在（'点击'，'.open_dia'，函数（EVT）{
        VAR对话框= $（'＆LT; D​​IV＆GT;＆LT; / DIV＆GT;）。追加（loading.clone（））;

        dialog.load（$（本）.attr（HREF'）+'＃内容）。对话框（{
                标题：$（本）.attr（标题），
                宽度：500，
                身高：300
        }）;

        dialog.dialog（开放）;
        返回false;

    }）;
}）;
 

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

如果您要加载每个对话框的内容只有一次，看到了分叉小提琴此更新：的http：// jsfiddle.net/91nc1k1t/5/

Original fiddle example

Failed example for dynamically created dialog

I got this script to load AJAX content into a jQuery UI dialog whose class is named .open_dia in the fiddle examples. The problem is that I have the .open_dia dynamically loaded into the page in a (window).bind("load", function(){} event , so I want to know how to change this line from

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

to something to the effect of

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

so that I can bind the event to the dynamically created element .open_dia to open the dialog. Any help would be appreciated.

Here's the original code:

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

Failed Code:

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

Example HTML:

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

Hi I have forked your solution and made modification to your javasript as follows:

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;

    });       
});

My modified JS fiddle is here: http://jsfiddle.net/91nc1k1t/2/

If you want to load each dialog's content only once, see this update of the forked fiddle: http://jsfiddle.net/91nc1k1t/5/