jQuery在html有效在jsp无效的原因及解决方法

最近用jQuery来写下拉框的选项值的左右移动，代码如下：


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
$("input").hover(function(){
$(this).val("")
},
function(){
$(this).val(this.defaultValue)
}
)
})

jQuery(function(){
//左侧加到右侧
jQuery("#add").click(function(){$("#select1 option:selected").appendTo("#select2")})

//右侧加到左边
jQuery("#remove").click(function(){$("#select2 option:selected").appendTo("#select1")})

//全部加到右边
jQuery("#add_all").click(function(){$("#select1 option").appendTo("#select2")})

//全部移动左边
$("#remove_all").click(function(){$("#select2 option").appendTo("#select1")})

//双击加到右边
$("#select1").dblclick(function(){$("option:selected",this).appendTo("#select2")})
//双击移动左边
$("#select2").dblclick(function(){$("option:selected",this).appendTo("#select1")})
})

function len(){
var sel = document.getElementById("select2");
alert(sel.length);
}

</script>
<style type="text/css">
*{ margin:0; padding:0;}
input{ color:#ccc;}

div.centent {
float:left;
text-align: center;
margin: 10px;
}
span {
display:block;
margin:2px 2px;
padding:4px 10px;
background:#898989;
cursor:pointer;
font-size:12px;
color:white;
}
</style>
</head>

<body>
<input type="text" value="aaaaa" /><br />

<div class="centent">
<select multiple="multiple" id="select1" style="width:100px;height:160px;">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
</select>
<div>
<img id="add" src='../img/content/arrowRight_disabled.gif' width="24" height="24" border='0' style="cursor:pointer; vertical-align:middle;" />
<span id="add_all" >全部添加到右边>></span> </div>
</div>

<div class="centent">
<select multiple="multiple" id="select2" style="width: 100px;height:160px;">
<option value="8">选项8</option>
</select>
<div>
<img id="remove" src='../img/content/arrowLeft_disabled.gif' height="22" border='0' style="cursor:pointer; vertical-align:middle;" />
<span id="remove_all"><<全部删除到左边</span>
</div>
</div>
<input name="sub" type="submit" onClick="len()" value="提交" />
</body>
</html>

用这个文件浏览的时候是可以用的，但是放到jsp里面就不能用了。笨方法来解决，写个alert方法看看报什么错，发现了问题所在：
jQuery的function前面的$与JSP页面的JSTL的$冲突了，直接导致不认识此对象方法。
解决办法：
把jQuery代码里面的$全改成jQuery就可以正常使用了！

赞 (0)

相关推荐

  • Jquery修改页面标题title其它JS失效的解决方法

    Jquery代码 复制代码 代码如下: $("title").html("hello"); 后来只好用下面这段js代码来实现 Js代码 复制代码 代码如下: document.title="hello";

  • 浅谈jQuery添加的HTML,JS失效的问题

    浅谈jQuery添加的HTML,JS失效的问题

    如下图所示, 点击添加后,会新添加一行,但是二级联动就失效了, $('.provinceList').live('change', function(){ var provinceId = $(this).val(); var obj = $(this); $.post('/yuyue/ajaxCityList', {'provinceId':provinceId}, function(list){ var data = eval( '(' + list + ')' ); if( data .

  • jquery绑定事件不生效的解决方法

    今天在开发前台页面时发现jquery绑定click事件,怎么都不生效.代码如下: 1.html:<input id="ceshisub" type="button" value="单击事件" > 2.html引用的test.js中的方法函数: 复制代码 代码如下: $("#ceshisub").bind("click",function(){ var a=1; a +=1; alert(&quo

  • js和jquery使按钮失效为不可用状态的方法

    设置disabled属性为true即为不可用状态. JS: 复制代码 代码如下: document.getElementByIdx("btn").disabled=true; jquery 复制代码 代码如下: $("#btn").attr("disabled", true); html: 复制代码 代码如下: <input type="button" value="提交" id="btn&

  • jQuery在html有效在jsp无效的原因及解决方法

    最近用jQuery来写下拉框的选项值的左右移动,代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • Jquery Post处理后不进入回调的原因及解决方法

    今天做一个简单的增加数据,通过Jquery的Post方法,把Json数据传到Jsp后台,处理后却怎么都不进入回调函数, $.post("addGs.do","x=" + JSON.stringify(x) ,function(d){ alert('成功'); } ,"json" ); 通过FF调试发现返回数据正常,200Ok, 没办法,又看看Jquery API,说如果最后的参数是Json时,要求返回的数据是Json格式, 会不会是返回的Json

  • Oracle Index索引无效的原因与解决方法

    Oracle Index索引无效的原因与解决方法

    索引无效原因 最近遇到一个Oracle SQL语句的性能问题,修改功能之前的运行时间平均为0.3s,可是添加新功能后,时间达到了4~5s.虽然几张表的数据量都比较大(都在百万级以上),但是也都有正确创建索引,不知道到底慢在了哪里,下面展开调查. 经过几次排除,把问题范围缩小在索引上,首先在确定索引本身没有问题的前提下,考虑索引有没有被使用到,那么新的问题来了,怎么知道指定索引是否被启用. 判断索引是否被执行 1. 分析索引 即将索引至于监控状态下,对索引进行分析.如下对 ID_TT_SHOHOU

  • windows7下启动mysql服务出现服务名无效的原因及解决方法

    windows7下启动mysql服务出现服务名无效的原因及解决方法

    问题原因:mysql服务没有安装. 解决办法: 在 mysql bin目录下 以管理员的权限 执行 mysqld -install命令 然后仍然以管理员的权限 net start mysql 开启Mysql服务了. 附卸载mysql服务的方法. 1.以管理员的权限 net stop mysql ,关闭mysql服务 2.以管理员的权限 mysqld -remove ,卸载mysql服务

  • IIS7中Ajax.AjaxMethod无效的原因及解决方法

    最近做用Ajax.AjaxMethod方法的时候,在asp.net的服务器下一切正常,用iis的时候,js中总是cs类找不到,我就郁闷了,折腾了大半天,终于找到错误原因了. 因为我发布网站用的是iis7,所以在web.config位置文件中<system.webServer><handlers>></handlers><system.webServer>里加入<add name="AjaxMethod" type="

  • IIS启用GZIP压缩js、css无效的原因及解决方法

    IIS启用GZIP压缩js、css无效的原因及解决方法

    在卡卡网的网站速度诊断里的检测结果: html网页已经成功启用了GZip压缩 css文件未成功启用GZip压缩 后来研究发现,IIS启用GZip时默认压缩的只有html网页,如果需要压缩css.js等文件,还需要另外简单配置一个文件. 打开C:\WINDOWS\system32\inetsrv\MetaBase.xml这个文件,然后查找"IIsCompressionScheme",会发现有三段,后面那个不用管,只设置前面两个即可.其中,"/LM/W3SVC/Filters/C

  • jquery使用on绑定a标签无效 只能用live解决

    如题 jQuery使用on()绑定动态生成元素的事件无效的问题 jQuery的on()方法可以绑定动态生成元素的事件,但是在实际使用时发现无效.如下HTML: <p> <a>123</a> </p> 使用如下方式,对静态元素有效,但是绑定动态生成的a元素的事件时无效: $('a').on('mouseenter', function(){ ............}); 需要绑定a的父级元素(此元素必须为静态元素,不是后来动态生成的),然后设定on()方法的

  • jQuery通过ajax方法获取json数据不执行success的原因及解决方法

    1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述3个标准写法: 1)键名称:用双引号括起: 2)字符串:用双引号括起: 3)数字,布尔值不需要使用双引号括起 : 注意:一定是双括号! 2.jQuery中ajax使用json数据类型总是跳过success执行error语句 执

  • jQuery动画出现连续触发、滞后反复执行的解决方法

    本文实例讲述了jQuery动画出现连续触发.滞后反复执行的解决方法.分享给大家供大家参考.具体分析如下: jQuery中slideUp .slideDown.animate等动画运用时,如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行,其表现不雅. 则解决办法: 1.在触发元素上的事件设置为延迟处理, 即可避免滞后反复执行的问题(使用setTimeout) 2.在触发元素的事件时预先停止所有的动画,再执行相应的动画事件(使用stop) jquery sto

  • jQuery多个版本和其他js库冲突的解决方法

    jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,这个问题 jquery早早就有给我们预留处理方法了,下面一起来看看解决办法. 1.同一页面jQuery多个版本或冲突解决方法. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery测试页</title> </head>

随机推荐