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

The first time my page loads, all content loads correctly. When loading a the same section of the page again using Ajax (to refresh content), the Jquery does not fully load.

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

Is this because the first time Jquery is activated by 'on page load' or something, so when opened in ajax window - the page hasn't actually reloaded, so Jquery isnt activated?

这是因为Jquery第一次被'on page load'激活，所以当在ajax窗口中打开时 - 页面实际上没有重新加载，所以Jquery没有被激活？

Here's the code I think causes the issue .. does it just need to activating when opened in an ajax div?

这是我认为导致问题的代码..它是否只需要在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>

I should mention that the Jquery is being used for styling reasons (it cleverly styles the page content). I would guess that happens when handler.wookmark(); is activated. How can I activate this in the ajax window?

我应该提一下，Jquery用于造型的原因（它巧妙地设置了页面内容的样式）。我猜想当handler.wookmark（）;被激活了。如何在ajax窗口中激活它？

I've been asked to provide my ajax code, so here it is:

我被要求提供我的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 -->

2 个解决方案

#1

I am a freaking genius, I solved my own problem! (This has never happened before :D)

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

I had to add the javascript into my ajax coding so it would be re-read once the ajax refreshed.

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

ANSWER:

回答：

<!-- 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 -->

#2

If i understood it right, you need to perform your code also in the:

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

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

If there is error with handler in the upper code, then make variable global: in your code

如果上层代码中有处理程序错误，那么在代码中创建变量global :.

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

and edit first code in my answer:

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

                //Here
                window.handler.wookmark()

#1