Strange Javascript Behavior Using Jquery and Delegate()
<p>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.</p>

<p>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.</p>

<pre><code> $(".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;
});
</code></pre>

<p>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.</p>

<p>As requested, here's the HTML that this javascript should be affecting.</p>

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

<p>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.</p>
