jQuery脚本不适用于Ajax [英] jQuery script not working with Ajax
问题描述
我有一个问题:
我正在实现jQuery滚动条(从这里开始)在通过Ajax填充的我的内容列表中.我有两页.在首页 js/custom_scrollbar.js 具有主要的"jp容器"功能.
第一页:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.codrops2.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<!-- the mousewheel plugin -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="js/scroll-startstop.events.jquery.js"></script>
<script type="text/javascript" src="js/custom_scrollbar.js"></script>
</head>
<body onload='myContactList();'>
<div id="contentListDiv" class="list jp-container"></div>
</body>
</html>
第二页:
<ul>
<li>
<a href="#">Z</a>
</li>
</ul>
当我收到Ajax响应时，它会填充.c0>列表，并通过.innerHTML在第一页的<div>中合并内容.我只是在调用另一个页面的一部分并将其内容合并到主页中.以下功能正在获得Ajax响应.
function myContentList() {
var http = createRequestObject();
http.open('GET', 'myContentListURL');
document.getElementById("contactListDiv").innerHTML = '<img src="images/loader-small.gif" border="0" />';
http.onreadystatechange = function() {
if (http.readyState == 4 && http.status == 200) {
if (http.getResponseHeader("SessionExpired") == "true")
window.location = "SessionExpiredURL";
var response = http.responseText;
if (response) {
document.getElementById("contactListDiv").innerHTML = response;
eval(document.getElementById('contactsDivScript').innerHTML);
}
}
};
http.send(null);
}
当我在不调用Ajax或.innerHTML的情况下将<ul>放在首页上时-jQuery可以正常工作，并且在内容上显示jQuery滚动条.但是，如果我遵循上面的代码，它不会调用jQuery脚本.
谢谢！
代码流如下所示:
1)您加载了页面和javascript.
2)初始化jScrollPane并使<div id="contentListDiv" class="list jp-container"></div>可滚动.
3)您调用ajax并收到响应.
4)您用ajax响应覆盖了<div id="contentListDiv" class="list jp-container"></div>，使其只是普通的旧html(不可滚动).
您看到问题了吗?
基本上，您需要做的是在获得ajax响应并更新<div id="contentListDiv" class="list jp-container"></div>之后调用jScrollPane.因此，jspane可以使其再次滚动.为此，您需要在ajax响应后修改代码，如下所示:
document.getElementById("contactListDiv").innerHTML = response;
eval(document.getElementById('contactsDivScript').innerHTML); //eval()? seriously?
$('#contentListDiv').jScrollPane();
您可以在此处详细了解jScrollPane-> http://jscrollpane.kelvinluck.com/
另外，您应该先获得一些JavaScript和jquery知识，不要冒犯.
I have an issue:
I am implementing jQuery scroll bar (from here) on my content list that are populating through Ajax. I have two pages. On the first page js/custom_scrollbar.js have main "jp-container" function.
First Page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.codrops2.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<!-- the mousewheel plugin -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="js/scroll-startstop.events.jquery.js"></script>
<script type="text/javascript" src="js/custom_scrollbar.js"></script>
</head>
<body onload='myContactList();'>
<div id="contentListDiv" class="list jp-container"></div>
</body>
</html>
Second Page:
<ul>
<li>
<a href="#">Z</a>
</li>
</ul>
When i receive Ajax response, it populates <li> list and merge contents in <div> on the first page through .innerHTML. I'm simply calling a part of another page and merging its contents into the main page. Following function is getting Ajax response.
function myContentList() {
var http = createRequestObject();
http.open('GET', 'myContentListURL');
document.getElementById("contactListDiv").innerHTML = '<img src="images/loader-small.gif" border="0" />';
http.onreadystatechange = function() {
if (http.readyState == 4 && http.status == 200) {
if (http.getResponseHeader("SessionExpired") == "true")
window.location = "SessionExpiredURL";
var response = http.responseText;
if (response) {
document.getElementById("contactListDiv").innerHTML = response;
eval(document.getElementById('contactsDivScript').innerHTML);
}
}
};
http.send(null);
}
When I place <ul> on first page without calling Ajax or .innerHTML - jQuery works as expected and it displays jQuery scroll bar on contents. But if i follow above code it doesn't call jQuery script.
Thank You!
The flow of your code goes something like this:
1) You load the page and the javascript.
2) jScrollPane is initialized and <div id="contentListDiv" class="list jp-container"></div> is made scrollable.
3) You call ajax and receive response.
4) You overwrite <div id="contentListDiv" class="list jp-container"></div> with your ajax response making it just plain old html (non scrollable).
You see the problem?
Basically what you need to do is call jScrollPane after you got the ajax response and updated <div id="contentListDiv" class="list jp-container"></div>. So the jspane can make it scrollable again. To do this you need to modify your code after ajax response like following:
document.getElementById("contactListDiv").innerHTML = response;
eval(document.getElementById('contactsDivScript').innerHTML); //eval()? seriously?
$('#contentListDiv').jScrollPane();
You can read more about jScrollPane here -> http://jscrollpane.kelvinluck.com/
Also You should get some javascript and jquery knowledge first, no offense.
这篇关于jQuery脚本不适用于Ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
