Question

我有一个问题：

我正在我的内容列表中实现jQuery滚动条（from here），这些滚动条通过Ajax填充。我有两页。在第一页 js / custom_scrollbar.js 有主要的“jp-container”功能。

第一页：

<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响应时，它会填充<li>列表，并通过.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);
}

当我将<ul>放在第一页而不调用Ajax或.innerHTML时 - jQuery按预期工作，它在内容上显示jQuery滚动条。但如果我按照上面的代码，它不会调用jQuery脚本。

谢谢！

Answer 1

实际上你没有使用jquery的完整功能。

您发布的代码使用了很多普通的Javascript。不是一个真正的问题，但有点奇怪。

所以请查看jquery的文档，尤其是Ajax文档。

http://api.jquery.com/category/ajax/

但是：我会这样做：

$("#contactListDiv").load("GET", url ,function(){
  //add your content here when loading is finished
});

Answer 2

您的代码流程如下：

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的更多信息 - ＆gt; http://jscrollpane.kelvinluck.com/

此外，你应该首先获得一些javascript和jquery知识，没有冒犯。

Answer 3

充分发挥jQuery的潜力可以简化：

$(function(){
    $("#contactListDiv").load('myContentListURL', function(){
                                  $(this).jScrollPane();
                              });
});

看看：

http://api.jquery.com/ready/ 和 http://api.jquery.com/load/

jQuery脚本不能使用Ajax

3 个答案: