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

问题描述 投票:0回答:5

我基本上重新创建了我需要制作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();
});​​
javascript jquery html html-table
5个回答
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)
});

3
投票

您的问题是您正在尝试将事件处理程序附加到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样式属性值的脚本时,在引用脚本之前引用外部样式表或嵌入样式元素很重要。


2
投票

你总是希望将事件处理程序放在document.ready函数中,比如

$(document).ready(function(){

//your code

});

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


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
};

0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.