通过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？

感谢任何能提供帮助的人！

- user2801463

---

我想知道答案，但作为解决方法，您可以尝试使用ajax调用加载javascript，然后它将起作用。（如果您可以调整WordPress以执行此操作，我不知道是否可能） - Cesc

这个问题不太清楚。“我正在使用WordPress主题Twenty Twelve，它似乎通过ajax请求加载页面。” 我不认为2012会通过ajax请求加载任何页面。 - Jim Maguire

我同意@JimMaguire的观点。你能提供一个示例页面吗？你能确认JS在每个页面加载中都存在吗？ - Jason Lydon

当您在这些页面的控制台中输入$(document).find("#nav-mobile-wrapper").fadeToggle(); 或 $("#header-navigation-link")时会发生什么？ - Jason Lydon

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

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

- yuewu

---

尝试了许多方法来自动选择或触发通过ajax加载的元素上的事件，最终这是我的解决办法 (已解决) https://dev59.com/pWox5IYBdhLWcg3wDgIz#68383274 - Akashxolotl

Answer 2

如果你已经知道ID，就不需要再去查找了，直接选择它。

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

- Suresh Atta

---

很遗憾，我也尝试过这个了。你有其他的建议吗？ - user2801463

Answer 3

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

- Emil Jamel Mahmuda

---

在SO上，不鼓励仅提供链接的答案。请在此处提供解决方案的要点。 - isherwood