0

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

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

5 回答 5

3

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

将代码包装在 DOM 就绪事件中：

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

更新小提琴​</p>

或者将代码放在<body>标签的末尾，就像这个 Fiddle一样。
但第一种选择被认为是一种更好的做法。

ready活动文档：

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

于 2012-04-28T19:19:36.180 回答
2

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

$(document).ready(function(){

//your code

});

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

于 2012-04-28T19:19:16.407 回答
1

放入任何一个

$(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)
});
于 2012-04-28T19:20:56.967 回答
1

看起来您那里有一些 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
};
于 2012-04-28T19:21:40.507 回答
0

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

于 2012-04-28T19:19:33.950 回答