0

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 = $(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.

Mesidin
  • 497
  • 10
  • 15
  • 1
    The alert() makes it sound like a timing dependency. Is this code executed in the .ready function? – Mike Robinson Oct 19 '10 at 16:22
  • @Marcel No error messages are showing in the console, and stepping through the code hasn't helped show anything either. @Mike It is executed in the .ready function. – Mesidin Oct 19 '10 at 16:25
  • 1
    do you execute that code in a `.ready()` handler ? – jAndy Oct 19 '10 at 16:25
  • @jAndy Yes, I do. All of the code before it and after it, and there is a significant amount, are all working correctly, no matter where I place the block inside the ready function. – Mesidin Oct 19 '10 at 16:34
  • 1
    What's the HTML look like? Is there a `.rating` on the page when doc ready is fired? - Also, what's the `id` of the `li`s parent? etc. I'd guess the HTML on the page is causing a problem if it works on another page. – Peter Ajtai Oct 19 '10 at 16:35
  • sample html please ( or the specific extract of your html that is targeted by your script, surely an '
      ' or '
      ')
     – dvhh Oct 19 '10 at 16:38
  • I posted the HTML. Like I said, if I run the javascript block above from the console in either browser, it works great and affects the HTML correctly, attaching events and firing off the ajax request. If I run it from the file, it does not work. – Mesidin Oct 19 '10 at 16:47
  • Have you tried reducing the problem? For instance, if your page is simply an HTML skeleton, plus the minimum js includes, plus the code above, does it work? If so, go to the full page and start removing chunks until you find the culprit. – Ken Redler Oct 19 '10 at 17:32

2 Answers2

0

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.

Community
  • 1
  • 1
Ken Redler
  • 23,863
  • 8
  • 57
  • 69
0

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.

Mesidin
  • 497
  • 10
  • 15