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()的回调中调用click事件。

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

links详细了解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);

捕获外部jquery ui模式中的点击

2 个答案: