0

我在我的一个主要导航链接上应用了一个函数，这个函数看起来像这样

    $(function() {
       $('#menu-item-1137').click(function(){
           $('#waterfacts').attr('class', 'active');
           $('li#simple2Tab').attr('class','active');    
       });  
    });

所以我的目标很简单，当单击该项目时，将这些类更改应用于 id 元素。

我面临的问题是该功能在您已经在目标页面上时有效，但是假设我在站点的索引上，然后单击#menu-item该功能将不起作用，因为我认为它正在尝试应用于页面我目前正在查看。

所以我的问题是，我该如何告诉函数首先等到页面加载然后运行？

提前致谢。

4

2 回答 2

0

由于快捷方式，您已经在加载 DOM 后绑定了事件

$(function() {})

这相当于

$(document).ready(function() {})

jQuery .ready()

您是否在页面初始加载后动态更改/插入菜单？如果是这样，您必须在此之后应用该事件。

您可以通过在绑定事件之前检查您的元素是否在 DOM 中来轻松调试此类问题：

$(function() {
    console.log($('#menu-item-1137').length);
    $('#menu-item-1137').click(function(){
       $('#waterfacts').attr('class', 'active');
       $('li#simple2Tab').attr('class','active');    
   });
});

如果您在控制台上的输出显示为零，则您的元素尚未在 DOM 中，并且事件不会被绑定。为了在这种情况下为您提供帮助，我们需要有关您网站结构的更多信息。

于 2012-11-13T22:29:29.690 回答
0

尝试使用.ready()，并在其中使用.on()将函数绑定到元素。

这将使该功能仅在页面加载后应用。

例子：

$(document).ready(function () {

    $("#menu-item-1137").on("click", function(){
        $('#waterfacts').attr('class', 'active');
        $('li#simple2Tab').attr('class','active'); 
    });

});​
于 2012-11-13T22:15:44.510 回答