此问题已在此处有答案：
Jquery script works in JSfiddle but not on html page（6个回答）
8年前关闭。
我需要知道为什么它这样做，因为我在我的网站上使用的脚本标签中的javascript，它不工作。
为什么我的javascript在脚本标签中不起作用（开关不会开关）http://jsfiddle.net/J7L4k/2/
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.btn-toggle').click(function() {
$(this).find('.btn').toggleClass('active');
if ($(this).find('.btn-primary').size()>0) {
$(this).find('.btn').toggleClass('btn-primary');
}
if ($(this).find('.btn-danger').size()>0) {
$(this).find('.btn').toggleClass('btn-danger');
}
if ($(this).find('.btn-success').size()>0) {
$(this).find('.btn').toggleClass('btn-success');
}
if ($(this).find('.btn-info').size()>0) {
$(this).find('.btn').toggleClass('btn-info');
}
$(this).find('.btn').toggleClass('btn-default');
});
$('form').submit(function(){
alert($(this["options"]).val());
return false;
});
</script>
<h4>Tiny</h4>
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-default">ON</button>
<button class="btn btn-xs btn-primary active">OFF</button>
</div>然而，当javascript被移动到JSFiddles javascript容器时，它工作得很好。http://jsfiddle.net/udKj5/3/
谢谢。
3条答案
按热度按时间xdnvmnnf1#
好的，所以它不工作的原因是，在JavaScript第一次运行时（并将点击功能设置为'btn-toggle'），页面中没有btn-toggle项目（因为页面仍在加载）。
您只需要在document.load之后运行这些东西
这在jsfiddle中默认发生，这就是它在那里工作的原因。如果右键单击并检查jsfiddle页面，您会发现它已将脚本转换为：
这显然很有效所以试试这个
t3psigkw2#
您的Javascript正在运行，但它是在DOM初始化之前运行的，因此，各种JQuery选择器不匹配任何元素，代码似乎什么也没做。
要解决这个问题，可以将代码 Package 在ondomready事件处理程序中，或者将所有javascript移动到页面的最底部，以便在执行脚本之前遇到DOM。
要将代码 Package 在ondomready事件处理器中，请执行以下操作：
public void run（）{
//你的代码在这里
}）;
上面的结构可以出现在页面的任何地方，甚至在顶部，jquery会在适当的时候自动运行它。
mwngjboj3#
这是因为你的代码在DOM元素初始化之前就已经运行了，因此代码无法在页面上找到这些元素。尝试将代码包含在
或简单地