javascript - 捕获在外部 jquery ui 模式中进行的点击

Question

我正在加载一个 jQuery UI 对话框窗口，其中包含一些缩略图。单击图像时，我想返回所选图像的 id。

我想我可以很容易地使用数据属性来实现这一点。我遇到的问题是，由于缩略图是从外部页面加载的，由于 DOM 已经加载，我无法捕获点击（.image-select）。我认为无论如何都是这样。如我错了请纠正我。

这是当前的代码：

(function($) {

    $('#opener').click(function(e) {
        e.preventDefault();
        $('#dialog').dialog('open');
    });

    $('#dialog').load('/account/images/thumbnails/').dialog({
        autoOpen: false,
        height: 560,
        width: 670
    });

    $('.image-select').click(function(e) {
        e.preventDefault();
        console.log($(this).data('id'));
    });

})(jQuery);

任何实现此目的的技巧或替代方法都将受到赞赏。

Answer 1

将on()单击事件委托给文档或文档中最近的静态父级，或在load().

 $(document).on('click','.image-select',function(e) {
    e.preventDefault();
    console.log($(this).data('id'));
 });

阅读更多关于on代表的链接

Answer 2

该load函数接受在加载后执行的回调。

(function($) {

$('#opener').click(function(e) {
    e.preventDefault();
    $('#dialog').dialog('open');
});

$('#dialog').load('/account/images/thumbnails/', function(){
   $('.image-select').click(function(e) {
    e.preventDefault();
    console.log($(this).data('id'));
   }); //function added in callback
}).dialog({
    autoOpen: false,
    height: 560,
    width: 670
});



})(jQuery);