如何在使用jquery追加元素後調用函數？

Question

我在頁面上有一些縮略圖。當我點擊其中的一個時，我想在Jquery對話框中查看原始照片。而且，我想根據照片寬度動態設置對話框的寬度。所以，我寫了下面的腳本來完成它。但是，它看起來像我不能訪問新添加到div的圖像。以下是我寫的功能：

function showOrignalPhoto($photo_name){ 
    $('#image_frame img').remove(); //remove the previous image 

    $('#image_frame').append('<img src="../IMAGE_PATH/'+$photo_name +'" />'); //append new image 

    $width = $('#image_frame img').width(); //get width of the new image 
    alert($width); //return 0!! 

    $("#dialog").dialog("option", "width", $width); //set the width of the dialog box 

    $("#dialog").dialog("open"); //open the dialog 
} 

Answer 1

它能夠獲取新添加的元素，但是由於兩個原因，您的代碼不會運行。

1. 如果對話框被隱藏與顯示：無的CSS，它或它的兒童的高度或寬度的任何計算將作爲顯示裝置沒有高度= 0，寬度= 0返回0。

2. 圖片需要時間加載。 Jo在將它添加到dom後不能計算它的高度。在這種情況下，它將始終使用父級的計算維度或您在CSS上定義的級別。

試試這個。

function showOrignalPhoto($photo_name){ 
    $('#image_frame img').remove(); //remove the previous image 

    //show some loading image before image is loaded. 

     var img=$('<img class="thumbnail" src="../IMAGE_PATH/'+$photo_name +'" />'); 
     img.on('load',function(){ 
      //hide loading image after image is loaded. 
      var width = this.width; 
      console.log(width); 
      $("#dialog").dialog("option", "width", width); //set the width of the dialog box 
     }); 

     $("#dialog").dialog("open"); //open the dialog 

} 

它會照顧到這兩個問題。

1. 它把它放在事件回調，所以它總是會在對話框打開語句後調用。

2. 在計算寬度之前，您的圖像將準備就緒。

你也應該在對話框中給最小寬度和高度，直到圖像加載它應該獲得一定的寬度和高度。另外，您可以在加載圖像之前顯示一些加載圖像。

Answer 2

你可以在圖像上添加onload事件，例如：

$('#image_frame').append('<img onload="loaded(this)" src="../IMAGE_PATH/'+$photo_name +'" />'); 

function loaded(img){ 
    alert($(img).width()); 
}