更改 DOM 后执行 jQuery

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

尝试使用“责任链”模式通过单个对象路由所有 DOM 更改。这样，对象就可以跟踪对 dom 的任何更改。然后我会使用 ConversationJS 来触发一个函数，它可以在 DOM 更改上做任何你想做的事情：https://github.com/rhyneandrew/Conversation.JS

Answer 2

我假设你使用 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