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已经准备好当您应用了点击事件。