Question

I’m a newbie to Javascript & HTML5. I’m iterating through a set of objects called requests and creating divs for them. I’m trying to have it so that if any of the items are hovered over the style class changes, and if they are clicked on that I will later invoke a function but for now just want an alert. Only the last item gets it.

I’ve looked at what seemed like similar issues other people have had, but I can’t see where I am going wrong.

        for (i= 0; i<reqs.length; i++) {
            var requestID = "request"+i;
            // Build the DIV for each request
            element.innerHTML += "<div id="+requestID+" class=request><img class=requestImage src=images/"
                +reqs[i].image+" alt=Face />&nbsp;&nbsp;"+reqs[i].name+"</div>";

            var requestElement = $('#'+requestID);
            requestElement.hover(
                function() {
                    $(this).removeClass().addClass("requestHover");
                    },
                function() {
                $(this).removeClass().addClass("request");
                }
            );
            requestElement.click(
            // if the request is clicked, then alert me - testing
                function() {
                    alert('Handler for .click() called.');
                }
            );

        }// end for

From my understanding the $(‘#request1’) should reference the first div item, and $(‘#request2’) the second, etc. It behaves like each .hover and .click assignment overwrites the previous one.

Answer 1

I’d write it this way

    for (i= 0; i<reqs.length; i++) {
        var requestID = "request"+i;
        // Build the DIV for each request
        element.innerHTML += "<div id="+requestID+" class=request><img class=requestImage src=images/"
            +reqs[i].image+" alt=Face />&nbsp;&nbsp;"+reqs[i].name+"</div>";
    }// end for
    var requestElement = $(".request");
    requestElement.hover(
        function() {
            $(this).removeClass().addClass("requestHover");
         },
         function() {
            $(this).removeClass().addClass("request");
         }
    );
    requestElement.click(
      // if the request is clicked, then alert me - testing
      function() {
         alert('Handler for .click() called.');
      }
    );

Edit to answer to your comment:

No, it’s a matter of closure. At the end of the loop, requestID is always the same, so $("#"+requestID); is always the same. It’s has if there is only one bind.

To overcome such a thing, you have some option:

• using $.each to loop (see http://forum.jquery.com/topic/binding-event-to-element-dynamically , http://forum.jquery.com/topic/binding-click-event-in-a-loop, http://api.jquery.com/jQuery.each/ )
• using the live() method (see http://api.jquery.com/live/, http://jsfiddle.net/VrzUb/1/ (used for the click))
• assigning the events thanks to a selector common to each object (e.g. using classes, as above)