更改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

回答

相關問題