Javascript 更改DOM后执行jQuery

这段代码在将图像拖动到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标题中执行此脚本：

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

$（文档）.ready（函数（）{
/*将fancybox应用于相册*/
$（“a.thumbLink”）.fancybox（）；
});

---

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

我假设您使用jQuery UI Dragable对象，您可以在Dragable对象的

stop（）

事件上调用Fancybox，如下所示：

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

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

编辑：

根据您的代码，您可以简单地将fancybox调用者置于

showFileInList

的函数中，如下所示：

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

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

---

请参阅工作代码尝试使用“责任链”模式通过单个对象路由所有DOM更改。这样，对象就可以跟踪对dom的任何更改。然后，我将使用ConversationJS启动一个函数，该函数可以对DOM更改执行任何操作：

如何拖动图像？您应该调用

$（“a.thumbLink”）.fancybox（）<代码>停止（）

如果您使用的是fancybox v1.3.4，则该版本不支持动态添加的元素。检查解决方法。版本2.x使用

live

，因此您只需正常初始化fancybox。我用于将图像从桌面拖到浏览器的代码就是javascript。没有jQuery，没有Ajax或其他任何东西。你可以在这里找到它：非常感谢你的努力，帮助我了。但我可能还没有说清楚。目标是将图像从桌面拖到dropzone。此时会自动生成缩略图。然后，当您单击缩略图时，fancybox将显示完整的图像。就像下面紫色区域中的图像一样。在Javascript上试用可以在这里找到：@user1879060 Try my edited，它现在可以按照您的实际需要工作。另请参见函数

showFileInList

下必须更改的javascript。当我添加您的一行代码时，它会显示带有fancybox的完整“fileDrop”div。按“下一步”也会更改fancybox中的图像标题，但不会更改图像本身…@user1879060当然，不客气：）您也可以在此处写下自己的答案，以便其他人在遇到类似问题时可以参考。