首页 文章

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

提问于
浏览 次
6

经过大量的研究，我还没有找到答案 . 我正在使用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为目标缺少什么？

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

jquery ajax wordpress

2 回答

  • 1

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

    $(document).on('click', "#header-navigation-link", function () {    
        $("#nav-mobile-wrapper").fadeToggle();
        alert( 'Success!' );
    });
    回复于
  • 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
});

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

    回复于

相关问题