Question

我基本上重新创建了我需要制作JS的表格部分，并将一些工作代码放在JS小提琴中，但当我尝试将其添加到表格部分所在的位置或其他任何称为int的函数时html似乎打破了页面......任何想法放在哪里？ http://jsfiddle.net/UyHj3/13/

$("tr.clickable.subheading td").click(function() {
    $(this).parents("tr.clickable.subheading").nextUntil("tr.clickable.subheading").toggle();
});

Answer 1

您的问题是您正在尝试将事件处理程序附加到DOM中不存在的元素。在jsFiddle中，默认情况下代码在onload之后运行，这意味着DOM +图像已完全加载。

将代码包装在DOM ready事件中：

$(function() {
    $("tr.clickable.subheading td").click(function() {
        $(this).parents("tr.clickable.subheading").nextUntil("tr.clickable.subheading").toggle();
    });
});

Updated Fiddle

或将代码放在<body>标记的末尾，与this Fiddle一样但第一种选择被认为是一种更好的做法。

ready活动docs：

虽然JavaScript在呈现页面时提供了用于执行代码的加载事件，但在完全接收到所有资产（如图像）之前，不会触发此事件。在大多数情况下，只要完全构造DOM层次结构，就可以运行脚本。传递给.ready（）的处理程序保证在DOM准备好后执行，因此这通常是附加所有其他事件处理程序并运行其他jQuery代码的最佳位置。使用依赖于CSS样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要。

Answer 2

您总是希望将事件处理程序放在document.ready函数中，例如

$(document).ready(function(){

//your code

});

您的更新小提琴：http://jsfiddle.net/ccross59/UyHj3/15/

Answer 3

加入

$(document).ready(function () {
   // I execute your code when the DOM is ready. 
});

或者

$(window).load(function () {
  // I execute your code when the entire page is loaded (including images or iframes)
});

Answer 4

看起来你有一些jQuery，所以请确保你包含对jQuery库的引用：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

并将您的代码放在$（document）.ready（）{}：

中

$(document).ready(function(){
// your code
};

Answer 5

应该有一个JavaScript窗格。确保你在左侧菜单中使用JQuery。

我在哪里放置这个JS代码才能使它工作？

5 个答案: