ajax加载后无法选择元素

Question

我正在使用 WordPress 主题 TwentyTwelve，它似乎通过 ajax 请求加载页面。我有一个按钮（#header-navigation-link），可以显示和隐藏页面上的另一个元素。它可以在没有 ajax 调用的情况下加载第一页，但是当我导航到另一个页面时，ajax 会加载它，并且我的程序无法再找到#nav-mobile-wrapper。

        $(document).on('click', "#header-navigation-link", function () {

        $(document).find("#nav-mobile-wrapper").fadeToggle();
        alert( 'Success!' );
    });

在所有加载 ajax 的页面上，总是会弹出警报，因此它正在寻找按钮，而不是要显示和隐藏的元素。我还尝试交换两者，因此您单击#nav-mobile-wrapper 以切换#header-navigation-link，反之亦然。

在此函数中定位#nav-mobile-wrapper 缺少什么？

感谢任何可以提供帮助的人！

Answer 1

这个元素（“#nav-mobile-wrapper”）也是由ajax生成的吗？如果是这样，请确保您的单击功能和生成此元素的位置在同一“范围”内。例如：

$( document ).ready(function() {
      $.ajax({
       // this is where you send the ajax request to server
      }).done(function(response){
       //because you said, it loaded page via ajax request, so page's loading and #nav-mobile-wrapper's generating probably happened here
       // If so, try put your click function here, inside the 'done' block!
       $(document).on('click', "#header-navigation-link", function(){
       // your stuff
     });
   })

我认为为什么您的函数不起作用仅仅是因为它找不到 #nav-mobile-wrapper 元素。没有你的代码，这是我能做的最好的猜测。不管怎样，如果你还有这个问题，请告诉我。

顺便说一句，我认为

$("#header-navigation-link").on('click',function(){
// you code
});

是一种更简单的书写和阅读方式:)

Answer 2

如果知道id，就不用再找了，直接选择就行了。

  $(document).on('click', "#header-navigation-link", function () {    
        $("#nav-mobile-wrapper").fadeToggle();
        alert( 'Success!' );
    });

Answer 3

强烈建议您不要使用load() 方法。尝试使用 this method 并将元素选择放在 body 函数结束之前。