Ruby Forum Rails Spinoffs (closed, excessive spam) > event.observe() for 'click' not working in ie7

Hi folks, I am not able to capture the onclick event in ie7 using the
code below. It works fine in ffox.

Here is the html:

<div id="star-rating">
<img id="stars" alt="rating" src="http://waeplwwab1:82/images/
community/light_star_3.gif"/>
<div class="star_1"/>
<div class="star_2"/>
<div class="star_3"/>
<div class="star_4"/>
<div class="star_5"/>
</div>

Here is the javascript:

ratings = $$("#star-rating div");
ratings.each(function(value){
  Event.observe(value, 'click', function() {alert('some logic goes
here');});
});

I read a couple of posts on this site that talked about the 'click'
event not being captured by prototype in ie. Does that apply here.

Hi,

We've started transitioning to a new, better-named, hopefully-spam-
free group for Prototype and script.aculo.us:

   http://groups.google.com/group/prototype-scriptaculous/

   prototype-scriptaculous@googlegroups.com

Could you please post your question there instead?  Thanks!  People
might still answer here, but probably not for all that much longer...
--
T.J. Crowder
tj / crowder software / com

On Tue, Jul 8, 2008 at 3:24 PM, andrewb <abbetts@gmail.com> wrote:
> It works fine in ffox.

After whipping together a quick test bed for your code, I have my
doubts about that!

> </div>
Here's the first problem. In FF and IE, the generated HTML for that
looks something like this:

====  HTML ====

<div id="star-rating">
  <img id="stars" alt="rating" src="light_star_3.gif" />
  <div class="star_1">
    <div class="star_2"/>
      <div class="star_3"/>
        <div class="star_4"/>
          <div class="star_5"/> </div>
        </div>
      </div>
    </div>
  </div>
</div>

==== /HTML ====

Which I don't think is what you had in mind ;)

Incidentally, since you say this is working if FF I'm assuming you've
got some CSS somewhere that gives those .star_[1-5] DIVs some width.
Otherwise, sans content, they're gonna collapse into nothing, which is
rather difficult to click on.

> Here is the javascript:
>
> ratings = $$("#star-rating div");
> ratings.each(function(value){
>        Event.observe(value, 'click', function() {alert('some logic goes
> here');});
> });

Which works for me (sort of, see below), although I wrote it like this:

$$('#star-rating div').invoke('observe', 'click', function() {
alert(this.className + ' clicked'); });

Which saves some space n' time by using Prototype's nifty
Enumerable#invoke method. You could save a few CPU cycles by
delegatin' that sucker.

Now, about that "sort of" qualifier previously mentioned. With your
HTML as provided, I got the clicks to register in both browsers--but
only for the left-most inner DIV, and I got five alert dialogs to
click through. Changing the HTML to empty DIV tags (e.g., <div
class="star_1"></div>) gets it working like a charm.

Incidentally, here's what I was working with CSS-wise, since that
could affect your approach. Note that I got rid of the IMG element and
just used a background image on the outer DIV.

====  CSS ====

#star-rating {
    background: url(my/star/image.png) left -13px repeat-x;
    height: 13px;
    margin: 0;
    padding: 0;
    width: 75px;
}
    #star-rating div {
        float: left;
        height: 13px;
        margin: 0;
        padding: 0;
        width: 15px;
    }

==== /CSS ====

> I read a couple of posts on this site that talked about the 'click'
> event not being captured by prototype in ie. Does that apply here.

I've never had any problems with click-event handlers. Well, no
problems that weren't my fault, anyway :) And, as mentioned, your code
seemed to work relatively fine for me. I'd double check my code, if I
were you.

:Dan Dorman