Question

我是Javascript＆amp; amp;的新手HTML5。我正在迭代一组称为请求的对象并为它们创建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'）引用第二个div等。它的行为类似于每个.hover和.click赋值覆盖前一个。< / p>

Answer 1

您可以在for循环之后分配事件监听器，这可能解决了您的问题：

for (...) {
}

$('div.request').hover( ... );

Answer 2

我会这样写的

    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);始终相同。如果只有一个绑定就有它。

要克服这种情况，你有一些选择：

使用$ .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/（用于点击））
通过每个对象共有的选择器（例如，使用类，如上所述）分配事件

只有最后一项绑定了点击/悬停事件？

2 个答案: