Question

我在iframe中使用 colorbox 插件。 iframe源是另一个HTML页面，其中包含图像courosal。我需要写一个点击事件来获取点击图像的ID。

文档准备好的HTML页面上的普通点击事件无法正常工作，我也尝试使用live。此外，我尝试在colorbox onload函数中进行单击事件并失败。

它是一个带有 asp.net 4.0 的Web应用程序。

请帮助我写一个点击事件。

我在调用彩盒的脚本

$(".iframe").colorbox({ iframe: true, width: "70%", height: "80%" });

    $(".iframe").colorbox({
        onLoad: function () {
            alert('onLoad: colorbox has started to load the targeted content');
            $('ul#boutiquegallery img').on('click', function () {
                alert('clciked img');
            });
        },
        onComplete: function () {
            alert('onComplete: colorbox has displayed the loaded content');

        },
        //onClosed: function () { alert('onClosed: colorbox has completely closed'); }
    });

我在“我的HTML”中尝试过的脚本

(function ($) {
    $('#boutique').boutique();

    //$("iframe.cboxIframe").contents().find($('ul#boutique img').live('click', function () {
    //    var id = $(this).attr('id');
    //    alert(id);
    //}));

    //$("iframe.cboxIframe").load(function () {
    //    alert('hi');
    //    // write your code here
    //    $('a').click(function () {
    //        alert('clciked');
    //    });
    //    $('img').live('click', function () {
    //        alert('clciked img');
    //    });
    //});
})(jQuery);

$(document).ready(function () {
        //$('img').on('click', function () {
        //    alert('clciked img');
        //});
    //$('iframe.cboxIframe').load(function () {
    //    $('iframe.cboxIframe').contents().find('img').live({
    //        click: function () {
    //            alert('clicked img');
    //        }
    //    });

    //});

});

Answer 1

尝试这个额外的步骤：

var iFrameDoc = $(".iframe").contentDocument || $(".iframe").contentWindow.document;
iFrameDoc.colorbox({ 
         // rest of the code is the same as yours after here
        onLoad: function () {
            alert('onLoad: colorbox has started to load the targeted content');
            $('ul#boutiquegallery img').on('click', function () {
                alert('clciked img');
            });
        },
        onComplete: function () {
            alert('onComplete: colorbox has displayed the loaded content');

        },
        //onClosed: function () { alert('onClosed: colorbox has completely closed'); }
    });

尝试访问DOM对象时， iframe可能会很棘手：）

Answer 2

我的HTML页面中的以下代码已经完成了这一操作。

 $(document).on('click', 'img', function () {
        alert('hi dsad');
        alert($(this).attr('src'));
    });

如何在colorbox onload方法中进行图像点击事件

2 个答案: