此问题已在此处有答案:
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元素初始化之前就已经运行了,因此代码无法在页面上找到这些元素。尝试将代码包含在
或简单地