Strange Javascript Behavior Using Jquery and Delegate()

I have a bit of javascript that I have used successfully on one page, but does not work on another. I copied the block from one file to another, but it does not seem to be attaching the event at all. When I run the copied block from the console in Chrome or Firefox after the page loads, it works fine. All of the javascript before and after the code block are working correctly. It's just this one little bit.

After some testing, I added an alert('test'); to the line above the code block. After the alert pops up, the code block runs. This is the only instance besides manually adding it with the console where it works. I wondered if this might be an issue with whitespace or tabs? I just need a separate pair of eyes or extra ideas of what I might be able to do to get this working. The alert() behavior is strange.

 $(".rating").delegate("li","click",function(){
     var res开发者_StackOverflow中文版 = $(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;
});

As I mentioned, the code itself works great on other pages, from the console, and when I add the alert. That makes me think it's something to do with the javascript file and/or formatting. If you have ideas, I would appreciate them.

As requested, here's the HTML that this javascript should be affecting.

<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> 

Additional Note: I failed to mention that the I am trying to affect is within a tab that is initially hidden on the page. I did move the block so that it occurred after the had been made visible, but that didn't change anything.

Maybe the setTimeout workaround will help. Wrap your code in a function, then call it with a timeout of zero:

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

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

There's some discussion of this approach in this SO question.

What I didn't explicitly mention, and should have, is that the html code being affected is called through ajax. So it is loading after the initial javascript has already run. This was working for every other bit of javascript that I was using on the page, including roll-over popups and more, but it wasn't working for this.

However, I moved this code into the HTML that was being loaded by the ajax, and it worked just fine then.

I am not sure why my other delegations worked, but this one doesn't. Many of them have the same situation of being loaded before the code they affect appears on the page, but they work just fine.