Question

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

这是因为第一次Jquery被'on page load'激活了，所以当在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 -->

Answer 1

我是个天才，我解决了自己的问题！（这从未发生过：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 -->

Answer 2

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

...
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()

Jquery在第一页加载时加载，但在ajax div中重新加载时不加载

2 个答案: