0

My index page have some records where each record have one or more images associated with it.

Under record description there are list of image thumbs. where I have onclick events binded to js function which clone that image in different height inside div showImage.

That's all fine.

Now I need to open that cloned image inside showImage div id in fullscreen mode using lightbox. Here's the code I'm having right now (it works but without fullscreen implementation)

<script type="text/javascript">
    function onPopUp() {
        var imageObject = $("img.details").first();
        var clonedObj = $(imageObject).clone();
        clonedObj.height("250px").width("300px");
        clonedObj.appendTo($("div#showImage"));

        $(".details").click(function (event) {
            //clone the clicked image
            var clone = $(this).clone();
            clone.height("250px").width("300px");
            //place it in the placeholder
            $('div#showImage').html(clone);
        });
    }

Backend code is asp.net mvc3 but I think that's not important here. For example purposes you can show me using html and css. Thanks

Update: That action that I want to bind onclick to cloned image inside showImage div can be alert message, for simplicity.

4

2 回答 2

1

你想拥有Event click一个在 之后创建的元素DOM，在这种情况下你想使用：

$('#cloned').bind('click', function() {
  alert('User clicked on "cloned element."');
});

在这里，您可以获得更多信息。

于 2012-05-22T16:14:59.023 回答
0

以下解决方案是成功的。完成了我的任务。我必须在元素渲染后绑定点击事件，所以我使用以下方法实现了这一点：

$("#showImage").live("click", function (event) {
    alert('User clicked on "cloned element."');
});

.live 将在窗口上添加一个事件处理程序并检查单击事件，然后检查目标，如果匹配则触发事件。

这样，在 DOM 上随时添加的任何元素都将触发此处理程序。

非常感谢@Seb，他为我指明了正确的方向。

于 2012-05-22T18:08:47.347 回答