Question

我的索引页面有一些记录，其中每条记录都有一个或多个与之关联的图像。

在记录描述中，有图像拇指列表。我有onclick事件绑定到js函数，它在div showImage内克隆不同高度的图像。

一切都很好。

现在我需要使用lightbox以全屏模式在showImage div id中打开克隆的图像。这是我现在拥有的代码（它可以工作，但没有全屏实现）

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

后端代码是asp.net mvc3，但我认为这在这里并不重要。例如，您可以使用html和css向我显示。感谢

更新：为简单起见，我想绑定到showImage div内的克隆图像的操作可以是警告信息。

Answer 1

您希望在Event click之后创建的元素上使用DOM，在这种情况下您要使用：

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

Here you have more information.

Answer 2

以下解决方案是succ。完成了我的目标。我必须在呈现元素之后绑定click事件，所以我使用以下方法来实现：

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

.live将在窗口上添加一个eventhandler并检查click事件，然后检查目标，如果匹配则触发事件。

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

非常感谢@Seb指出了正确的方向。

里面克隆的div绑定动作与jquery

2 个答案: