Question

这段代码在将图像拖入div元素后将图像添加到DOM中。

var showImage = function (ev) {
    var file = ev.target.file;

    var thumb = new Image(100,100);
    thumb.src = ev.target.result;
    thumb.className = 'thumbFoto';
    thumb.title = file.name;
    thumb.alt = file.name;

    var anchor = document.createElement('a');
    anchor.className = 'thumbLink';
    anchor.href = ev.target.result;
    anchor.rel = 'album1';
    anchor.title = file.name;
    anchor.appendChild(thumb);

    dropZone.appendChild(anchor);
}

此代码使用

链接到页面

<script type="text/javascript" src="js/code.js"></script>

将图像添加到网页后，我想使用Fancybox预览它们。加载页面时（在将任何图像拖到其上之前），此脚本在html-header中执行：

<script type="text/javascript">
    $(document).ready(function() {
        /* Apply fancybox to albums */
        $("a.thumbLink").fancybox();
    });
</script>

现在如何确保我可以使用Fancybox预览最近添加的图像？

Answer 1

我假设您使用jQuery UI可拖动对象，您可以在可拖动对象的stop()事件上调用您的fancybox，如下所示：

$( ".selector" ).draggable({
    stop: function( event, ui ) {
        $("a.thumbLink").fancybox();
    }
});

修改

根据您的代码，您可以简单地将您的fancybox调用者置于showFileInList的函数中，如下所示：

var showFileInList = function (ev) { var file = ev.target.file; if(document.getElementById("fileDropText")){ var textToBeRemoved = document.getElementById("fileDropText"); var imageToBeRemoved = document.getElementById("fileDropImg"); textToBeRemoved.parentElement.removeChild(textToBeRemoved); imageToBeRemoved.parentElement.removeChild(imageToBeRemoved); } var thumb = new Image(100,100); thumb.src = ev.target.result; // var thumb = createThumb(ev.target.result); thumb.className = 'thumbFoto'; thumb.title = file.name; thumb.alt = file.name; var anchor = document.createElement('a'); anchor.className = 'thumbLink'; anchor.href = ev.target.result; anchor.rel = 'album1'; anchor.title = file.name; // anchor.addEventListener("click", showImagePreview, false); anchor.appendChild(thumb); // fileList.insertBefore(anchor, dropZone); dropZone.appendChild(anchor); // show fancybox $("a.thumbLink").fancybox({type: "inline", href: "#fileDrop"}); }

查看工作代码 HERE

Answer 2

尝试使用“责任链”模式通过单个对象路由所有DOM更改。这样，对象可以跟踪对dom的任何更改。然后我会使用ConversationJS来激活一个在DOM更改时执行任何操作的函数：https://github.com/rhyneandrew/Conversation.JS

更改DOM后执行jQuery

2 个答案: