jQuery 脚本不适用于 Ajax答案

【问题标题】：jQuery script not working with AjaxjQuery 脚本不适用于 Ajax
【发布时间】：2011-10-12 06:50:11
【问题描述】：

我有一个问题：

我正在通过 Ajax 填充的内容列表上实现 jQuery 滚动条 (from here)。我有两页。在首页 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 响应时，它会通过 .innerHTML 填充第一页上的 <li> 列表并合并 <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 脚本。

谢谢！

【问题讨论】：

据我所知，这里不涉及 Java。我猜你的意思是用javascript 标记问题 - 为你改变了。
也没有任何jquery

标签： javascript jquery ajax jsp

【解决方案1】：

你的代码流程是这样的：

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 知识，不要冒犯。

【讨论】：

【解决方案2】：

实际上你并没有使用 jquery 的全部功能。

您发布的代码使用了大量纯 Javascript。不是真正的问题，但有点奇怪。

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

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

但是：我会这样做：

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

【讨论】：

【解决方案3】：

利用 jQuery 的全部潜力可以使这变得如此简单：

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

看看：

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

【讨论】：