Question

经过大量的研究，我没有找到答案。我正在使用wordpress主题Twenty Twelve，它似乎通过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

如果您知道该ID，则无需再次找到它，只需选择它即可。

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

Answer 2

这个元素（＆＃34;＃nav-mobile-wrapper＆＃34;）也是由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元素。没有你的代码，这是我可以拥有的最佳猜测。无论如何，如果你还有这个问题，请告诉我。

BTW，我想

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

是一种更简单的写作和阅读方式：）

Answer 3

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

jQuery无法在ajax加载后选择元素

3 个答案: