3

我的页面第一次加载时，所有内容都正确加载。当再次使用 Ajax（刷新内容）加载页面的相同部分时，Jquery 不会完全加载。

这是因为第一次 Jquery 是由“页面加载”或其他东西激活的，所以当在 ajax 窗口中打开时 - 页面实际上并没有重新加载，所以 Jquery 没有被激活？

这是我认为导致问题的代码..它只需要在 ajax div 中打开时激活吗？

<!-- Once the page is loaded, initalize the plug-in. -->
  <script type="text/javascript">
    (function ($){
      var handler = $('#tiles li');

      handler.wookmark({
          // Prepare layout options.
          autoResize: true, // This will auto-update the layout when the browser window is resized.
          container: $('#main'), // Optional, used for some extra CSS styling
          offset: 5, // Optional, the distance between grid items
          outerOffset: 0, // Optional, the distance to the containers border
          itemWidth: 178 // Optional, the width of a grid item
      });

        // Update the layout.
        handler.wookmark();
      });
    })(jQuery);
  </script>

我应该提到，Jquery 是出于样式原因而使用的（它巧妙地设置了页面内容的样式）。我猜这会在handler.wookmark();激活时发生。如何在 ajax 窗口中激活它？

我被要求提供我的 ajax 代码，所以这里是：

<!-- ajax script -->
<script>
window.onload = function () {
    var everyone = document.getElementById('everyone'),
        favorites = document.getElementById('favorites');

    everyone.onclick = function() {
        loadXMLDoc('indexEveryone');
        var otherClasses = favorites.className;
        if (otherClasses.contains("Active")) {
            everyone.className = 'filterOptionActive';
            favorites.className = 'filterOption';
        }
    }

    favorites.onclick = function() {
        loadXMLDoc('indexFav');        
        var otherClasses = everyone.className;
        if (otherClasses.contains("Active")) {
            favorites.className = 'filterOptionActive';
            everyone.className = 'filterOption';
        }
    }

    function loadXMLDoc(pageName)
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("leftCont").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","../home/" + pageName + ".php",true);
        xmlhttp.send();
        }
}
</script>
<!-- ends ajax script -->
4

2 回答 2

2

我是个天才，我解决了我自己的问题！（这以前从未发生过：D）

我必须将 javascript 添加到我的 ajax 编码中，以便在 ajax 刷新后重新读取它。

回答：

<!-- ajax script -->
<script>
window.onload = function () {
    var everyone = document.getElementById('everyone'),
        favorites = document.getElementById('favorites');

    everyone.onclick = function() {
        loadXMLDoc('indexEveryone');
        var otherClasses = favorites.className;
        if (otherClasses.contains("Active")) {
            everyone.className = 'filterOptionActive';
            favorites.className = 'filterOption';
        }
    }

    favorites.onclick = function() {
        loadXMLDoc('indexFav');        
        var otherClasses = everyone.className;
        if (otherClasses.contains("Active")) {
            favorites.className = 'filterOptionActive';
            everyone.className = 'filterOption';
        }
    }

    function loadXMLDoc(pageName)
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("leftCont").innerHTML=xmlhttp.responseText;






// this is the content that needed adding!
(function ($){
          var handler = $('#tiles li');

          handler.wookmark({
              // Prepare layout options.
              autoResize: true, // This will auto-update the layout when the browser window is resized.
              container: $('#main'), // Optional, used for some extra CSS styling
              offset: 5, // Optional, the distance between grid items
              outerOffset: 0, // Optional, the distance to the containers border
              itemWidth: 178 // Optional, the width of a grid item
          });

          // Capture clicks on grid items.
          handler.click(function(){
            // Randomize the height of the clicked item.
            var newHeight = $('img', this).height() + Math.round(Math.random() * 300 + 30);
            $(this).css('height', newHeight+'px');

            // Update the layout.
            handler.wookmark();
          });
        })(jQuery);






                }
              }
            xmlhttp.open("GET","../home/" + pageName + ".php",true);
            xmlhttp.send();
            }
    }
    </script>
    <!-- ends ajax script -->
于 2013-11-06T16:32:08.433 回答
0

如果我理解正确，您还需要在以下位置执行您的代码：

...
if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("leftCont").innerHTML=xmlhttp.responseText;
            //Here
            handler.wookmark()
            }
...

如果上层代码中的处理程序有错误，则在您的代码中设置变量 global:

(function ($){
      var handler = $('#tiles li');
      window.handler = handler

并在我的答案中编辑第一个代码：

                //Here
                window.handler.wookmark()
于 2013-11-06T16:00:38.750 回答