0

函数 CreateImage 函数动态地创建一个新图像并将它们放入一个 div 中。当鼠标悬停在动态创建的图像上时，如何使用 fancybox？

function createImage(source) {
    var pastedImage = new Image();
    pastedImage.onload = function () {}
    pastedImage.src = source;
    pastedImage.width = 150;
    pastedImage.height = 150;
    pastedImage.title = 'Click on the image to preview';
    pastedImage.setAttribute('class', 'dynamicPic');
    pastedImage.setAttribute('id', 'dynamicPic');

    var dynamicDiv = document.createElement('div');
    //div.innerHTML = "";
    dynamicDiv.setAttribute('class', 'dynamicDiv');
    dynamicDiv.setAttribute('id', 'dynamicDiv');
    dynamicDiv.appendChild(pastedImage);
    $('#editableDiv').before(dynamicDiv);
}
4

1 回答 1

1

如果我理解正确，您的函数将生成一个类似的 html

<div id="dynamicDiv" class="dynamicDiv">
    <img id="dynamicPic" class="dynamicPic" width="150" hight="150" title="Click on the image to preview" src="image.jpg" />
</div>

...或者理想情况下，您的动态划分#dynamicDiv应该附加到包装容器（除非您将其直接附加到body），例如：

<div id="wrapper">
    <div id="dynamicDiv" class="dynamicDiv">
        <img id="dynamicPic" class="dynamicPic" width="150" hight="150" title="Click on the image to preview" src="image.jpg" />
    </div>
</div>

如果这是正确的，那么我将使用包装容器选择器以委托形式使用该.on()方法，例如：

$("#wrapper").on("click", ".dynamicPic", function () {
    $.fancybox(this.src, {
        // API options here
    });
    return false;
});

如果您不使用包装器，请使用body标签$("body")

见JSFIDDLE

请注意，如果您要创建多个图像，请尝试为每个图像分配一个增量 ID，因为 ID 应该是唯一的。

另请注意，.on()需要 jQuery v1.7+

编辑：如果你想在鼠标悬停在图像上时触发fancybox，那么使用mouseover事件而不是click事件代码如下：

$("#wrapper").on("mouseover", ".dynamicPic", function () { ...

查看更新的 JSFIDDLE

编辑#2：如果使用低于 v1.7 的 jQuery 版本，则使用.delegate() ... 其委托形式；）

请参阅更新的 JSFIDDLE和mouseover事件。

注意 2：fancybox v2.x需要 jQuery v1.6 或更高版本，因此该.delegate()选项仅适用于fancybox v1.3.4。

于 2013-08-15T07:02:38.677 回答