Question

我有一些javascript，我在一个页面上成功使用，但不能在另一个页面上使用。我将块从一个文件复制到另一个文件，但它似乎根本没有附加事件。当我在页面加载后从Chrome或Firefox中的控制台运行复制的块时，它可以正常工作。代码块之前和之后的所有javascript都正常工作。这只是一点点。

经过一些测试后，我添加了警报（'测试'）;到代码块上方的行。弹出警报后，代码块将运行。除了手动将其添加到其工作的控制台之外，这是唯一的实例。我想知道这可能是空格或制表符的问题吗？我只需要一双单独的眼睛或额外的想法，我可以做些什么来使这个工作。 alert（）行为很奇怪。

 $(".rating").delegate("li","click",function(){
     var res = $(this).parent().attr('id');
     res = res.split("-");
     var resid = res[1];
     var classer = $(this).attr("class");
     var pdata = {'id':resid,'vote':classer};
     $.post('http://www.example.org/ec/ajax/vote',pdata);
     $(this).parent().children().removeClass("current").removeClass("clicked");
     $(this).addClass('clicked');
     return false;
});

正如我所提到的，代码本身在其他页面上，从控制台以及添加警报时效果很好。这让我觉得这与javascript文件和/或格式有关。如果你有想法，我会很感激。

根据要求，这是这个javascript应该影响的HTML。

<ul class="rating" id="rate_9">
 <li class="star1"><a title="Rate 1 Star Out Of 5" class="one-star" href="#">1</a></li>
 <li class="star2"><a title="Rate 2 Stars Out Of 5" class="two-stars" href="#">2</a></li>
 <li class="star3"><a title="Rate 3 Stars Out Of 5" class="three-stars" href="#">3</a></li>
 <li class="star4 current"><a title="Rate 4 Stars Out Of 5" class="four-stars" href="#">4</a></li>
 <li class="star5"><a title="Rate 5 Stars Out Of 5" class="five-stars" href="#">5</a></li>
</ul>

附加说明：我没有提到我试图影响的是在最初隐藏在页面上的选项卡中。我确实移动了块，以便在看到它之后发生，但这并没有改变任何东西。

Answer 1

也许setTimeout解决方法会有所帮助。将代码包装在函数中，然后以超时零调用它：

var f = function(){
    $(".rating").delegate("li","click",function(){...[etc]...});
}

$(document).ready( function(){
    other();
    stuff();
    setTimeout(f,0);
});

在this SO question中讨论了这种方法。

Answer 2

我没有明确提及，应该有的是受影响的html代码是通过ajax调用的。所以它是在最初的javascript已经运行之后加载的。这适用于我在页面上使用的所有其他javascript，包括翻转弹出窗口等等，但它不适用于此。

但是，我将此代码移动到由ajax加载的HTML中，然后它运行得很好。

我不确定为什么我的其他代表团会这样做，但这个代表团却没有。他们中的许多人在他们影响的代码出现在页面之前具有相同的加载情况，但它们工作得很好。

使用Jquery和Delegate（）的奇怪的Javascript行为

2 个答案: