啟用jQuery時調用多個函數。（“單擊” ...）

Question

我有兩個div並排。 左（方法）div包含鏈接，單擊這些鏈接可使用'.load'從外部html文件將一些文本加載到右（描述）div中。 我也有一些腳本可以將'methods'div的高度與'descriptions'div的高度相匹配，該腳本已放入函數中。

我的問題是我無法讓高度匹配功能在與文本加載腳本相同的單擊上運行。 目前，單擊鏈接可根據需要加載文本，但是高度匹配直到再次單擊鏈接時才發生。

我是javascript / jQuery的新手，因此對任何及所有分辨率（包括所需的全部代碼重寫）都開放。

可以在此處看到代碼“正在運行”： http : //plnkr.co/edit/1CW1a7XNu73Kyo4xPMyg?p=preview

 $(document).ready(function() { function matchDesc() { var hh = document.getElementById("descriptions").offsetHeight; document.getElementById("methods").style.height = hh + "px"; } $("#content").on('click', '#link', function(){ var str = $(this).attr('class'); var sect = str.slice(-1); $("#descriptions").load("descriptions.html #description-" + sect); $("#methods li a").css('color','#3164BE'); $(this).css('color','red'); matchDesc(); }); window.onload = function() { matchDesc(); } }); 

Answer 1

此處的固定代碼： http : //plnkr.co/edit/lcAmQ9wcIGLJ9JjDi3HD?p=preview

$(document).ready(function() {

  function matchDesc() {
    var hh = document.getElementById("descriptions").offsetHeight;
    document.getElementById("methods").style.height = hh + "px";
  }

  $("#content").on('click', '.link', function() {
    var str = $(this).attr('id');
    var sect = str.slice(-1);
    $("#descriptions").load("descriptions.html #description-" + sect,
      function() {
        $("#methods li a").css('color', '#3164BE');
        $(this).css('color', 'red');
        matchDesc();
      });

  });

  window.onload = function() {
    matchDesc();
  }
});

正如arun所說的，您需要在load事件完成后致電進行matchDesc

Answer 2

看到這個叉子： http : //plnkr.co/edit/x4Ge7Xy3DRuQWlM9McxD?p=preview

遵循Arun的建議並更改了matchDesc（）; 使用window.onload不要使用matchDesc(); 使得函數在讀取后立即調用。 使用window.onload = matchDesc將允許它在其他所有內容加載之后加載。

$(document).ready(function() {

    function matchDesc() {
        var hh = $('#descriptions').outerHeight()        
        return $('#methods').outerHeight(hh);
    }

     $("#content").on('click', '.link', function(){
        var str = $(this).attr('id');
        var sect = str.slice(-1);

        $("#descriptions").load("descriptions.html #description-" + sect, function() { 
            $("#methods li a").css('color','#3164BE');
            $(this).css('color','red');
            matchDesc();
        });
    });                     

    window.onload = matchDesc;

});