JQuery事件处理程序在事件发生前激发

Question

我正试图使用for循环将事件处理程序添加到一系列div中。应该发生的是，当我单击一个#containingThumbsdiv时，应该会显示它对应的#contentdiv。起初，我遇到了这样一个问题：在for循环中分配事件处理程序意味着，无论我单击了哪个#containingThumbsdiv，都只会显示最后一个#contentdiv。

我通过调用一个外部函数而不是在事件处理程序本身中定义一个函数来解决了这个问题，但现在由于某种原因，每个#containingThumbsdiv上的所有事件处理程序都会在页面加载后立即启动。在那之后，点击div什么都不做。

这是我的HTML:

<div id="containingThumbs">
<div><img src="1.png"></div>
<div><img src="2.png"></div>
<div><img src="3.png"></div>
<div><img src="4.png"></div>
<div><img src="5.png"></div>
<div><img src="6.png"></div>
<div><img src="7.png"></div>
<div><img src="8.png"></div>
<div><img src="9.png"></div>
<div><img src="10.png"></div>
<div><img src="11.png"></div>
<div><img src="3.png"></div>
<div><img src="4.png"></div>
<div><img src="5.png"></div>
<div><img src="6.png"></div>
<div><img src="7.png"></div>
<div><img src="8.png"></div>
</div>
<div id="content">
<div><img src="1.png"></div>
<div><img src="2.png"></div>
<div><img src="3.png"></div>
<div><img src="4.png"></div>
<div><img src="5.png"></div>
<div><img src="6.png"></div>
<div><img src="7.png"></div>
<div><img src="8.png"></div>
<div><img src="9.png"></div>
<div><img src="10.png"></div>
<div><img src="11.png"></div>
<div><img src="3.png"></div>
<div><img src="4.png"></div>
<div><img src="5.png"></div>
<div><img src="6.png"></div>
<div><img src="7.png"></div>
<div><img src="8.png"></div>
</div>

这是相关的JS/JQuery代码：

function expandDiv(j){
    //first hide all content that is currently displayed, if any
    $("#content div").css("display","none");
    //then display only the right content div
    $("#content div:nth-child("+j+")").css("display","inherit"); 
}
function makeInteractive(){
    for (var i = 0;i<$("#containingThumbs").children().length;i++){
        $("#containingThumbs").on("click","div",expandDiv(i));
    }
}

Answer 1

此行：

$("#containingThumbs").on("click","div",expandDiv(i));

调用expandDiv并将其返回值传递到on，与foo(bar())调用bar并将结果传递到foo的方式完全相同。传递给on的应该是一个函数引用。

纠正该代码的几种方法：

1. 如果你只是想知道点击了哪个div而想要i，那么你不需要它；在对expandTab的调用中，this将引用div的DOM元素。因此，如果将expandTab更改为使用this，则只需删除expandTab:之后的(i)

   function makeInteractive(){
       for (var i = 0;i<$("#containingThumbs").children().length;i++){
           $("#containingThumbs").on("click","div",expandTab);
           // No (i) ---------------------------------------^
       }
   }
   

   同样，您必须更改expandTab才能将this用于div。

2. 您可以使用闭包通过i：

   function makeInteractive(){
       for (var i = 0;i<$("#containingThumbs").children().length;i++){
           $("#containingThumbs").on("click","div",makeHandler(i));
       }
       function makeHandler(index) {
           return expandDiv(index);
       }
   }
   

   这假设expandTab期望将该索引作为其第一个参数，并且没有使用事件对象。

3. 或者，如果您想稍微更改expandDiv，可以通过让jQuery将额外的参数作为事件数据传递给您来处理：

   function makeInteractive(){
       for (var i = 0;i<$("#containingThumbs").children().length;i++){
           $("#containingThumbs").on("click", "div", i, expandDiv);
           // Note the `i` --------------------------^           ^--- no ()
       }
   }
   

   CCD_ 19将使用CCD_ 20作为索引。