更改DOM后执行jQuery

这段代码将图像拖到DOM元素后添加图像。更改DOM后执行jQuery

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>

现在我该怎样确保我可以预览使用的fancybox最近添加的图片吗？

来源

2012-12-05 user1879060

如何拖动图像？你应该调用'$（“a.thumbLink”）。fancybox（）;'在stop（）'拖动事件。 – SubRed

如果您使用的是fancybox v1.3.4，该版本不支持动态添加的元素。查看http://stackoverflow.com/a/9084293/1055987了解解决方法。版本2.x使用'live'，所以你只需要正常初始化fancybox。 – JFK

@JFK非常感谢！ – user1879060

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

来源

2012-12-05 14:19:11 SubRed

我用于将图像从桌面拖动到浏览器的代码只是javascript。没有jQuery，没有Ajax或其他东西。你可以在这里找到它： http://www.student.kuleuven.be/~s0179967/code.js – user1879060

请参阅我编辑的答案。 – SubRed

非常感谢您为帮助我而努力。但是我可能没有让自己足够清楚。目标是将图像从桌面拖到dropzone。有一个缩略图会自动生成。然后当你点击缩略图时，应该用fancybox显示完整的图像。就像下面紫色区域中的图像一样。试一试http://www.student.kuleuven.be/~s0179967/public/index.html Javascript代码可以在这里找到： http://www.student.kuleuven.be/~s0179967/public /js/code.js – user1879060

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

来源

2012-12-09 23:30:35

更改DOM后执行jQuery

回答

相关问题