在jQuery中绑定一个点击事件到动态创建的对话框

小提琴原图

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

我用这个脚本将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>

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

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