jquery - 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
});

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