將圖像的新內容加載到div後重新運行腳本

Question

我有根據屏幕大小調整圖像大小的腳本。

腳本的圖片：

$(document).ready(function($){ 

     var ratios, 
    adjustSize = function(){ 

    var total = 520, 
     win = $(window), 
     winW = win.width(), 
     winH = win.height()-150; 

    $('#container img').each(function(i){ 
     var w = winH * ratios[i]; 
     $(this).css({ 
      height: winH, 
      width : w 
     }); 
    total += w; 
    }); 
    $('body').width(total); 
}; 

    $(window).load(function(){ 
     ratios = $('#container img').map(function(){ 
      return $(this).width()/$(this).height(); 
     }); 
     adjustSize(); 
    }) 
    .resize(function(){ adjustSize(); }); 
}); 

一切正常，只是當我嘗試加載新的內容進入格從外部文件很大，這個腳本調整大小不會再重新運行，並調整圖片大小。

腳本變革的內容：

$(document).ready(function(){ 
      $("#id").click(function(){ 
      $('#container').load('some.html').hide().fadeIn('slow'); 
      }); 
     }); 

我如何更改腳本？ 我嘗試了一個事件.click（），但它不起作用，或者我做錯了什麼。 我真的被卡住了，請任何人幫忙！

謝謝

Answer 1

您正試圖在其上下文之外訪問「adjustResize（）」函數。

嘗試添加以下內容到文件

var adjustSize; 

，然後添加的極頂「;」而不是「」中‘比’，因此它看起來就像這樣：

var ratios; 
adjustSize = function(){ 

Answer 2

您可以使用一個回調load調用一個函數它完成時：

$(document).ready(function(){ 
     // Click event is needed assuming that you want the load to happen only when the element with id 'id' is clicked 
     $("#id").on('click', function(){ 
      $('#container').load('some.html', function() { 
       // Do something after load (wrap your image resizing code in a function and call it here) 
      }) 
      .hide().fadeIn('slow'); 
     }); 
    }); 

Answer 3

呼叫adjustSize（） （在隱藏它之前）功能

$('#container').load('some.html',function(){ 
    adjustSize(); 
    $(this).hide().fadeIn('slow'); 
});