jQuery腳本在DOM在.click事件中加載後工作？

Question

我想找出如何讓一個jQuery腳本正常工作，當點擊事件開始時，腳本計算一個容器的高度（這個腳本出現在加載頁面的開始並且工作100％），但是我現在試圖讓它在.click事件中工作。

如果有人知道我應該如何實現這一點，我將非常感激。

p.s.我已經嘗試做好文件準備;等待DOM加載，但沒有雪茄。

$(document).ready(function() { 
    $("#hidden4").click(function(event) { 
     event.preventDefault(); 
     $("#hidden4-1").slideToggle(); 

     var classDown = $('#hidden4 div.down').attr('class'); 
     var classUp = $('#hidden4 div.up').attr('class'); 

     if(classDown == 'down') { 
      $("#hidden4 div.down").attr("class","up"); 
     } 
     else if(classUp == 'up') { 
      $("#hidden4 div.up").attr("class","down"); 
     } 
      // Attain the absolute height of the container id container and assign to a usable variable 
      var height = $("#container").height(); 
      alert (height); 
      // Use the previous variable, divide by 4 then round that up and multiply by 4 and assign to new variable 
      var newHeight = Math.ceil(height/4) * 4; 

      // Create a new variable and add the string "center" to it 
      var finalHeight = "center "; 

      // Using the previous variable add to it using the first 2 variables subtracting to find the difference and add 2 
      finalHeight += (newHeight - height)+2; 

      // Using the previous variable add to it the string "px" for the css selector usage 
      finalHeight += "px"; 

      // Update the CSS of the required element altering the background position with the final variable 
      $(".contentFooter").css('background-position', finalHeight); 
    }); 
}); 

在此先感謝您。

Answer 1

你在ready（）中嵌套ready（）。不要做這樣的事情。試試這個：

$(document).ready(function() { 
    $("#hidden4").click(function (event) { 
     event.preventDefault(); 
     $("#hidden4-1").slideToggle(); 

     var classDown = $('#hidden4 div.down').attr('class'); 
     var classUp = $('#hidden4 div.up').attr('class'); 

     if (classDown == 'down') { 
      $("#hidden4 div.down").attr("class", "up"); 
     } 
     else if (classUp == 'up') { 
      $("#hidden4 div.up").attr("class", "down"); 
     } 
     // Attain the absolute height of the container id container and assign to a usable variable 
     var height = $("#container").height(); 
     alert(height); 
     // Use the previous variable, divide by 4 then round that up and multiply by 4 and assign to new variable 
     var newHeight = Math.ceil(height/4) * 4; 

     // Create a new variable and add the string "center" to it 
     var finalHeight = "center "; 

     // Using the previous variable add to it using the first 2 variables subtracting to find the difference and add 2 
     finalHeight += (newHeight - height) + 2; 

     // Using the previous variable add to it the string "px" for the css selector usage 
     finalHeight += "px"; 

     // Update the CSS of the required element altering the background position with the final variable 
     $(".contentFooter").css('background-position', finalHeight); 
    }); 
}); 

順便說一句，如果你想在容器高度計算腳本在頁面加載和點擊執行的，比把代碼的函數內部並運行裏面都準備好了（）的函數，然後點擊（）。

---

更新：

$("#foo").slideToggle(function() { 
    // this code executes AFTER slideToggle has completed 
}); 

Answer 2

我不認爲你需要嵌套另一個$（文件）。就緒（）的一個jQuery的點擊，因爲DOM已經準備好當您應用了點擊事件。