为什么out.println输出的页面的jquery效果都没了

qq_39687238 2017-08-17 09:45:57

out.println输出了以下代码，可是jquery效果中的 select 这一系列没了，其他的全部js方法和一些jquery还能正常用
在jsp页面里引入的jquery js方法是在jsp页面里实现的
"<ul class='select'>"
+ "<li class='select-list'>"
+ "<dl id='select1'>"
+ "<dt>地点:</dt>"
+ "<dd class='select-all selected'><a onclick='testgeta(this.rel)' rel='a' href='javascript:;'>全部</a></dd>"
+ "<dd><a onclick='testgeta(this.rel)' rel='南苑' href='javascript:;'>南苑食堂</a></dd>"
+ "<dd><a onclick='testgeta(this.rel)' rel='北苑' href='javascript:;'>北苑食堂</a></dd>"
+ "<dd><a onclick='testgeta(this.rel)' rel='济大' href='javascript:;''>济大周边</a></dd>"
+ "</dl>"
+ "</li>"
+ "<li class='select-list'>"
+ "<dl id='select2'>"
+ "<dt>平均价格：</dt>"
+ "<dd class='select-all selected'><a onclick='testgetb(this.rel)' rel='a' href='javascript:;'>全部</a></dd>"
+ "<dd><a onclick='testgetb(this.rel)' rel='0' href='javascript:;'>15元以下</a></dd>"
+ "<dd><a onclick='testgetb(this.rel)' rel='15' href='javascript:;'>15-30元</a></dd>"
+ "<dd><a onclick='testgetb(this.rel)' rel='30' href='javascript:;'>30-45元</a></dd>"
+ "<dd><a onclick='testgetb(this.rel)' rel='45' href='javascript:;'>45-60元</a></dd>"
+ "<dd><a onclick='testgetb(this.rel)' rel='60' href='javascript:;'>60元以上</a></dd>"
+ "</dl>"
+ "</li>"
+ "<li class='select-list'>"
+ "<dl id='select3'>"
+ "<dt>类型：</dt>"
+ "<dd class='select-all selected'><a onclick='testgetc(this.rel)' rel='a' href='javascript:;'>全部</a></dd>"
+ "<dd><a onclick='testgetc(this.rel)' rel='一般' href='javascript:;'>一般</a></dd>"
+ "<dd><a onclick='testgetc(this.rel)' rel='冷饮' href='javascript:;'>冷饮</a></dd>"
+ "<dd><a onclick='testgetc(this.rel)' rel='饭店' href='javascript:;'>饭店</a></dd>"
+ "<dd><a onclick='testgetc(this.rel)' rel='自助餐' href='javascript:;'>自助餐</a></dd>"
+ "</dl>"
+ "</li>"
+ "</ul>"
+ "<div id='div1'>"
+ "</div>"

...全文

304 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

斯洛文尼亚旅游 2017-08-18

打赏
举报

tabs？你导入tabs类库了没有先

推荐学习资料
jQuery仿excel表格单元格合并插件
jquery全年日期选择器日历插件

hongmei85 2017-08-18

打赏
举报

select是什么效果你贴的这些代码里面，没看见使用select

usecf 2017-08-18

打赏
举报

class='select' 你可以直接把select的相关样式写在你动态加载的代码里面比如把class='select'改成 style=“XXX：xxx”

qq_39687238 2017-08-18

打赏
举报

引用 8 楼 showbo 的回复:

ajax加载的内容不要放jquery，就只返回你要的内容就行了，jquery和组件js文件直接放在当前页面。初始化的代码你可以做成一个函数，在ajax回调中调用就行了，初始化代码块不要放ajax回调里面，不好维护和重用

好的多谢了！

斯洛文尼亚旅游 2017-08-18

打赏
举报

ajax加载的内容不要放jquery，就只返回你要的内容就行了，jquery和组件js文件直接放在当前页面。初始化的代码你可以做成一个函数，在ajax回调中调用就行了，初始化代码块不要放ajax回调里面，不好维护和重用

qq_39687238 2017-08-18

打赏
举报

引用 6 楼 qq_39687238 的回复:

[quote=引用 5 楼 showbo 的回复:] 这个你的看组件api是什么了，动态加载的内容一般组件都不会初始化的，因为初始化操作一遍放dom ready中执行一次，后续加载的内容不再初始化，需要人工调用api进行初始化 function ajaxCall() { if (xmlHttpRequest.readyState == 4) { //完全得到服务器的响应 if (xmlHttpRequest.status == 200) { //没有异常 var text = xmlHttpRequest.responseText; document.getElementById("divajax").innerHTML = text; //组件初始化代码重新执行一次 } } }

应该就是您说的问题了。新手小白。。不懂什么您的意思。。不过刚刚我又试了，随便百度了个非常简单的jquery动画，也是这样，单独jsp完全没问题，一旦用servlet包含这个jsp动画页面返回到主页也是失效。。您能说下如何解决吗。。。。什么叫“ 组件初始化代码重新执行一次”，应该怎么改？？ [/quote]

引用 5 楼 showbo 的回复:

这个你的看组件api是什么了，动态加载的内容一般组件都不会初始化的，因为初始化操作一遍放dom ready中执行一次，后续加载的内容不再初始化，需要人工调用api进行初始化 function ajaxCall() { if (xmlHttpRequest.readyState == 4) { //完全得到服务器的响应 if (xmlHttpRequest.status == 200) { //没有异常 var text = xmlHttpRequest.responseText; document.getElementById("divajax").innerHTML = text; //组件初始化代码重新执行一次 } } }

按您说的我百度了解决方法，在您备注的地方添加 $(document).ready(function(){ 用到的js方法 }); 可以正常显示jquery动画了！。。但是我的jquery用到了 jquery库里面的东西，我要把整个库都写进去吗还是怎么弄？或者把我用到的挑出来？？

qq_39687238 2017-08-18

打赏
举报

引用 5 楼 showbo 的回复:

这个你的看组件api是什么了，动态加载的内容一般组件都不会初始化的，因为初始化操作一遍放dom ready中执行一次，后续加载的内容不再初始化，需要人工调用api进行初始化 function ajaxCall() { if (xmlHttpRequest.readyState == 4) { //完全得到服务器的响应 if (xmlHttpRequest.status == 200) { //没有异常 var text = xmlHttpRequest.responseText; document.getElementById("divajax").innerHTML = text; //组件初始化代码重新执行一次 } } }

应该就是您说的问题了。新手小白。。不懂什么您的意思。。不过刚刚我又试了，随便百度了个非常简单的jquery动画，也是这样，单独jsp完全没问题，一旦用servlet包含这个jsp动画页面返回到主页也是失效。。您能说下如何解决吗。。。。什么叫“ 组件初始化代码重新执行一次”，应该怎么改？？

斯洛文尼亚旅游 2017-08-18

打赏
举报

这个你的看组件api是什么了，动态加载的内容一般组件都不会初始化的，因为初始化操作一遍放dom ready中执行一次，后续加载的内容不再初始化，需要人工调用api进行初始化 function ajaxCall() { if (xmlHttpRequest.readyState == 4) { //完全得到服务器的响应 if (xmlHttpRequest.status == 200) { //没有异常 var text = xmlHttpRequest.responseText; document.getElementById("divajax").innerHTML = text; //组件初始化代码重新执行一次 } } }

qq_39687238 2017-08-18

打赏
举报

引用 1 楼 usecf 的回复:

class='select' 你可以直接把select的相关样式写在你动态加载的代码里面比如把class='select'改成 style=“XXX：xxx”

引用 1 楼 usecf 的回复:

class='select' 你可以直接把select的相关样式写在你动态加载的代码里面比如把class='select'改成 style=“XXX：xxx”

引用 2 楼 hongmei85 的回复:

select是什么效果你贴的这些代码里面，没看见使用select

引用 3 楼 showbo 的回复:

tabs？你导入tabs类库了没有先 推荐学习资料 jQuery仿excel表格单元格合并插件 jquery全年日期选择器日历插件

唉。。不好说明白，就是我有一个jsp页面，上面有一个导航栏，一个筛选框，一个搜索框，本来这个页面是都正常的，窗口缩小后导航栏可以缩成一个小点，筛选框也都能正常的显示选中效果（如图），但是我把筛选框删掉，把原来筛选框位置换成一个<div id="ajax"> ,然后通过搜索功能点击确定调用js方法（ajax）在servlet里把筛选框输出回页面的<div id="ajax">处，但是这时输出回来的筛选框的选中效果就没了，不过筛选及搜索的功能还是照样正确，导航栏也是正常能缩小，就是out.println的代码的jquery效果都没了没用out.println输出筛选框代码之前：

用out.println输出筛选框的代码以后：那个筛选的选中效果就没了，点击以后功能还正常，就是这么个选中的功能都没了，导航栏还是正常的能缩小（这也是jquery效果）也就是说我out.println输出的代码的css效果还有，javascript的方法也能调用，就是没jquery效果了有没有知道咋回事的，谢谢各位了！！如果要看代码在下面。上全部代码： zhuye.jsp: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!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" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <title>济大美食网</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/normalize.css"> <script src="js/sx.js" type="text/javascript"></script> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="js/script.js" type="text/javascript"></script> <style> .bj2 { background-image:url('photo/beijing2.jpg'); background-repeat:no-repeat; background-position:40% 0%; width: 100%; margin:0 auto; height: 800px; } </style> </head> <body> header 是导航栏 <header class="header"> <div id='cssmenu'> <ul> <li><a href="zhuye.jsp" class="active">首页</a></li> <li class='has-sub'><a href='#'>食堂饭菜</a> <ul> <li class='has-sub'><a href='#'>西校区</a> <ul> <li><a href='#'>一食堂</a></li> <li><a href='#'>二食堂</a></li> <li><a href='#'>三食堂</a></li> <li><a href='#'>八食堂</a></li> <li><a href='#'>九食堂</a></li> </ul> </li> <li class='has-sub'><a href='#'>舜耕东校区</a> <ul> <li><a href='#'>六食堂</a></li> <li><a href="#">七食堂</a></li> </ul> </li> </ul> </li> <li class="has-sub"><a href='#'>学校周边</a> <ul> <li><a href="#">西南门</a></li> <li><a href="#">后龙</a></li> <li><a href="#">环宇城</a></li> <li><a href="#">天桥附近</a></li> <li><a href="#">华联</a></li> <li><a href="#">外卖推荐</a></li> <li><a href="#">其他</a></li> </ul> </li> <li><a href='#'>信息有误？</a></li> <li class="user login"><a href="login.jsp">登录</a></li> <li class="user register"><a href="register.jsp">注册</a></li> </ul> </div> </header> 以上是导航栏 <div class="container bj2"> <div class="row"> <div class="col-m-12 col-xs-12" align="center"> <section class="webdesigntuts-workshop"> <form> <input id="key" type="search" placeholder="今天吃汉堡还是面条?" > <input id="keybutton" value=搜索 type="button" onclick="ajaxRequest()">  </form> </section> <br><br><br><br> <hr style="border-top:#D8D8D8;width: 80%"/> </div> </div> <div id="divajax">  </div> </div> <script type="text/javascript"> var str1,str2,str3,key; window.onload=function() { str1="a"; str2="a"; str3="a"; } function testgeta (str) { str1= str; ajaxRequest(); } function testgetb (str) { str2 = str; ajaxRequest(); } function testgetc (str) { str3= str; ajaxRequest(); var xmlHttpRequest = null;//声明一个空的对象以接受XMLHttpRequest对象 function ajaxRequest() { key=document.getElementById("key").value; var firstName=str1; var middleName=str2; var endName=str3; var queryString="str1=" + firstName + "&str2=" + middleName + "&str3=" + endName + "&key=" + key; queryString="./AjaxServlet?"+queryString; queryString = encodeURI(encodeURI(queryString)); //window.location.href=queryString; if(window.ActiveXObject) { //IE的 xmlHttpRequest = new ActionXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { //除IE外的 xmlHttpRequest = new XMLHttpRequest(); } if(xmlHttpRequest != null) { xmlHttpRequest.open("GET", queryString, true); //关联好ajax的回调函数 xmlHttpRequest.onreadystatechange = ajaxCall; //真正向服务器发送请求 xmlHttpRequest.send(); } } //从servlet的返回值： function ajaxCall() { if(xmlHttpRequest.readyState == 4 ) { //完全得到服务器的响应 if(xmlHttpRequest.status == 200) { //没有异常 var text = xmlHttpRequest.responseText; document.getElementById("divajax").innerHTML = text; } } } //ajax向servlet传参结束 </script> </body> </html> AjaxServlet.java 输出部分： out.println("<ul class='select'>" + "<li class='select-list'>" + "<dl id='select1'>" + "<dt>地点:</dt>" + "<dd class='select-all selected'><a onclick='testgeta(this.rel)' rel='a' href='javascript:;'>全部</a></dd>" + "<dd><a onclick='testgeta(this.rel)' rel='南苑' href='javascript:;'>南苑食堂</a></dd>" + "<dd><a onclick='testgeta(this.rel)' rel='北苑' href='javascript:;'>北苑食堂</a></dd>" + "<dd><a onclick='testgeta(this.rel)' rel='济大' href='javascript:;'>济大周边</a></dd>" + "</dl>" + "</li>" + "<li class='select-list'>" + "<dl id='select2'>" + "<dt>平均价格：</dt>" + "<dd class='select-all selected'><a onclick='testgetb(this.rel)' rel='a' href='javascript:;'>全部</a></dd>" + "<dd><a onclick='testgetb(this.rel)' rel='0' href='javascript:;'>15元以下</a></dd>" + "<dd><a onclick='testgetb(this.rel)' rel='15' href='javascript:;'>15-30元</a></dd>" + "<dd><a onclick='testgetb(this.rel)' rel='30' href='javascript:;'>30-45元</a></dd>" + "<dd><a onclick='testgetb(this.rel)' rel='45' href='javascript:;'>45-60元</a></dd>" + "<dd><a onclick='testgetb(this.rel)' rel='60' href='javascript:;'>60元以上</a></dd>" + "</dl>" + "</li>" + "<li class='select-list'>" + "<dl id='select3'>" + "<dt>类型：</dt>" + "<dd class='select-all selected'><a onclick='testgetc(this.rel)' rel='a' href='javascript:;'>全部</a></dd>" + "<dd><a onclick='testgetc(this.rel)' rel='一般' href='javascript:;'>一般</a></dd>" + "<dd><a onclick='testgetc(this.rel)' rel='冷饮' href='javascript:;'>冷饮</a></dd>" + "<dd><a onclick='testgetc(this.rel)' rel='饭店' href='javascript:;'>饭店</a></dd>" + "<dd><a onclick='testgetc(this.rel)' rel='自助餐' href='javascript:;'>自助餐</a></dd>" + "</dl>" + "</li>" + "</ul>" );