5

我正在使用 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 我缺少什么?

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

4

3 回答 3

2

这个元素(“#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
});

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

于 2014-03-17T17:56:41.667 回答
0

知道id就不用再找了,直接选择就行了。

  $(document).on('click', "#header-navigation-link", function () {    
        $("#nav-mobile-wrapper").fadeToggle();
        alert( 'Success!' );
    });
于 2013-09-21T06:13:46.647 回答
-1

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

于 2020-04-09T14:00:09.293 回答