Jquery在第一次页面加载时加载，但在ajax div重新加载时不加载。

Question

第一次加载页面时，所有内容都正确加载。当使用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 -->

- Elaine Adams

---

我认为你需要使用委托(delegate)；这样你就可以像这样编写代码： $( "table" ).delegate( "td", "click", function() { $( this ).toggleClass( "chosen" ); }); - Sahin Yanlık

我不理解上述评论的相关性。 - Elaine Adams

你的 AJAX 部分是什么样子的？你能把这段代码放在回调函数中重新初始化吗？ - Matt Burland

然后只需在ajax success()方法中运行您的样式化jquery代码即可。 - Feanor

我的这门语言的知识非常有限。我不知道该怎么做 :( - Elaine Adams

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

- Elaine Adams

---

我刚才试图说您需要在 AJAX 中运行代码，而您当前正在做什么... - Feanor

Answer 2

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

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

如果上面的代碼中有處理程序(handler)錯誤，請在您的代碼中將變量設置為全局(global)。

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

并编辑我的回答中的第一段代码：

                //Here
                window.handler.wookmark()

- Feanor

---

我无法确定这是正确的答案还是错误的答案，因为我对这种语言的了解有限。我甚至不知道如何将上述代码与我的脚本相关联。:( - Elaine Adams

我已经将它添加到我的问题中。 - Elaine Adams

根据ajax调用编辑答案的回复。 - Feanor

没这么幸运。这让我疯了！ - Elaine Adams