为什么 jquery 脚本不起作用
Why is the jquery script not working?
为什么jQuery脚本在我的jsfiddle中工作,而不是在我的页面中?
我做了什么:尝试了不同版本的JQuery...制作剧本
所以我有这个测试页面:
头部
<!-- Scripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<style>
select #canselect_code {
width:200px;
height:200px;
}
.fr {
float:right;
}
.fl {
float:left;
}
</style>
<script>
$(document).ready(function(){
$('[id^='"btnRight'"]').click(function (e) {
$(this).prev('select').find('option:selected').remove().appendTo('#isselect_code');
});
$('[id^='"btnLeft'"]').click(function (e) {
$(this).next('select').find('option:selected').remove().appendTo('#canselect_code');
});
});
</script>
</head>
身体部位
<div>
<select id='canselect_code' name='canselect_code' multiple class='fl'>
<option value='1'>toto</option>
<option value='2'>titi</option>
</select>
<input type='button' id='btnRight_code' value=' > ' />
<br>
<input type='button' id='btnLeft_code' value=' < ' />
<select id='isselect_code' name='isselect_code' multiple class='fr'>
<option value='3'>tata</option>
<option value='4'>tutu</option>
</select>
</div>
在这里 JSFIDDLE
现在我的问题是:为什么代码在 JsFiddle 中工作,而不是在我的文档中?
感谢您的回答!
编辑:添加了文档就绪功能。还是不行!
Samuel Liew是对的。有时 jquery 与其他 jquery 冲突。要解决此问题,您需要将它们按可能不会相互冲突的顺序排列。做一件事:在谷歌浏览器中打开你的应用程序,然后检查右下角是否有红色标记的错误。这是哪种错误?
这对我有用:
<script>
jQuery.noConflict();
// Use jQuery via jQuery() instead of via $()
jQuery(document).ready(function(){
jQuery("div").hide();
});
</script>
原因:"许多 JavaScript 库使用 $ 作为函数或变量名称,就像 jQuery 一样。在jQuery的情况下,$只是jQuery的别名,所以所有功能都可以使用,而无需使用$"。
在这里阅读完整的原因:https://api.jquery.com/jquery.noconflict/
如果这解决了您的问题,则可能是另一个库也在使用 $。
这工作正常。 只需在 document.ready 函数中插入您的 jquery 代码即可。
$(document).ready(function(e) {
// your code here
});
example:
jquery
$(document).ready(function(e) {
$('[id^='"btnRight'"]').click(function (e) {
$(this).prev('select').find('option:selected').remove().appendTo('#isselect_code');
});
$('[id^='"btnLeft'"]').click(function (e) {
$(this).next('select').find('option:selected').remove().appendTo('#canselect_code');
});
});
.html
<div>
<select id='canselect_code' name='canselect_code' multiple class='fl'>
<option value='1'>toto</option>
<option value='2'>titi</option>
</select>
<input type='button' id='btnRight_code' value=' > ' />
<br>
<input type='button' id='btnLeft_code' value=' < ' />
<select id='isselect_code' name='isselect_code' multiple class='fr'>
<option value='3'>tata</option>
<option value='4'>tutu</option>
</select>
</div>
脚本包装在就绪函数中。jsFiddle会自动为您执行此操作。
$(function() {
$('[id^='"btnRight'"]').click(function (e) {
$(this).prev('select').find('option:selected').remove().appendTo('#isselect_code');
});
$('[id^='"btnLeft'"]').click(function (e) {
$(this).next('select').find('option:selected').remove().appendTo('#canselect_code');
});
});
这就是为什么您不应该使用第三方工具的原因,除非您知道它们为您自动化/简化的内容。
这可能不是您要寻找的答案,但可能会帮助那些 jquery 无法正常工作的人,或者有时工作而在其他时间无法工作的人。
这可能是因为你的jquery还没有加载,你已经开始与页面交互。 要么把jquery放在头顶(可能不是一个好主意),要么使用加载器或微调器来阻止用户与页面交互,直到整个jquery加载完毕。
<script type="text/javascript" >
do your codes here it will work..
type="text/javascript" is important for jquery
<script>
使用noConflict()
方法
例如:jQuery.noConflict()
并通过jQuery()
而不是通过$()
使用 jQuery
例如:jQuery('#id').val();
而不是$('#id').val();
。
如果你有一些其他脚本与jQuery冲突,用这个包装你的代码
(function($) {
//here is your code
})(jQuery);
- 当有许多形式时,Fancybox脚本不起作用
- Aureliaview中的脚本不起作用
- JQuery脚本在IE中不起作用
- 淡入淡出脚本不起作用
- 未捕获的类型错误:无法设置属性'innerHTML'如果为null,则将脚本移动到正文不会;不起作用
- jQuery脚本在googlechrome中不起作用
- 替换字符串的脚本;在某些网站上不起作用
- 从jquery对话框恢复原始数据,脚本不起作用
- java脚本中的谷歌地图在第二次点击时不起作用
- 我的脚本不起作用
- JavaScript onScroll在谷歌应用程序脚本web应用程序中不起作用
- 为什么锚在此脚本中不起作用
- getRange(单元格)在谷歌应用程序脚本中不起作用
- 脚本在我的引导模式中不起作用
- 用于wooccommerce的简单JQuery脚本不起作用
- 对照数组脚本检查文本框中的值不起作用
- 脚本在IE 9中不起作用
- 如果视图中没有Jquery脚本引用,Unobtrusive Javascript Validation是不起作用的
- Codeigniter :通过 AJAX 调用 php 脚本时路由不起作用
- 谷歌转化不起作用 - 脚本无法加载