javascript - 只有最后一项绑定(bind)了点击/悬停事件？

Question

我是 Javascript 和 HTML5 的新手。我正在迭代一组称为 requests 的对象并为它们创建 div。我试图拥有它，以便如果任何项目悬停在样式类更改上，并且如果单击它们，我稍后将调用一个函数，但现在只需要一个警报。只有最后一项才能获得它。

我查看了其他人也遇到过的类似问题，但我看不出我哪里出了问题。

        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

根据我的理解， $('#request1') 应该引用第一个 div 项目，$('#request2') 应该引用第二个，等等。它的行为就像每个 .hover 和 .click 赋值都会覆盖前一个。

Answer 1

我会这样写

    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.');
      }
    );

编辑以回答您的评论:

不，这是一个关闭的问题。在循环结束时，requestID 始终相同，因此 $("#"+requestID); 始终相同。如果只有一个绑定(bind)，则有。

要克服这样的问题，您有一些选择:

• 使用 $.each 进行循环(请参阅 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/ )
• 使用 live() 方法(请参阅 http://api.jquery.com/live/ 、 http://jsfiddle.net/VrzUb/1/ (用于点击))
• 通过每个对象共用的选择器分配事件(例如使用类，如上所述)