javascript - jquery 单击处理程序的奇怪行为

Question

我正在做一个显示图像而不是常规 radio 的自定义 radio 元素。

基本的 html 是这样的:

<div id="wrap">
   <p></p>
   <input type="radio" data-check='class-check' data-uncheck='class-uncheck' style='display:none;'>
   <p></p>
   <input type="radio" data-check='class-check' data-uncheck='class-uncheck' style='display:none;'>
   <p></p>
   <input type="radio" data-check='class-check' data-uncheck='class-uncheck' style='display:none;'>
</div>

创建自定义 radio :

$("#wrap").radio({someData});

我成功地创建了我需要的元素并显示了图像，我只是在点击事件(部分代码)方面遇到了一些问题:

var elems = [];
for (var i = 0; i < someData.length; i++) {
    elems.push({});


    elems[i].input = $(this).find("input").eq(i);                 // get input
    $("<div></div>").insertAfter(elems[i].input);                 // create a div to display image to
    elems[i].wrap = elems[i].input.next();
    elems[i].wrap.click(function(elem){
        console.log(elem);                                        // this console.log is triggered when the page load, not on click event
        elem.addClass('img-checked').removeClass('img-uncheked'); // only the last element in elems have its class changed, not the elems[i] I give as parameter.
    }(elems[i]));
}

我不明白为什么 console.log在脚本加载时触发，而不是在点击事件时触发。

还有 console.log显示良好数据，但类更改仅适用于 elems[i] 的最后一个元素当点击被触发时。

我也尝试过不给 click 任何参数功能，只需使用 elems[i]直接但它的行为相同，始终对 elems 的最后一个条目应用更改

Answer 1

I dont understund why the console.log is triggered on script load and not on click event.

因为您正在立即执行该函数。

elems[i].wrap.click(function(elem){
    console.log(elem);                                     
    elem.addClass('img-checked').removeClass('img-uncheked');
}(elems[i]));

看到最后的 (elems[i]) 了吗？这会调用该函数并将其返回值 传递给.click。如果您单独定义函数，您在做什么可能会更明显:

function foo(elem){
    console.log(elem);                                     
    elem.addClass('img-checked').removeClass('img-uncheked');
}
elems[i].wrap.click(foo(elems[i]));

现在应该更清楚为什么 console.log 在页面加载时被调用了。

---

如果你想捕获当前元素，我建议使用 pass elems[i] as event.data :

elems[i].wrap.click(elems[i], function(event){
    console.log(event.data);    
    // elem / event.data is not a jQuery object, so I don't know which element 
    // you wanted to target here
    elem.addClass('img-checked').removeClass('img-uncheked');
});

如果您查看 jQuery documentation for .click ，您可以看到它接受一个可选的 eventData 参数，该参数将作为 event.data 提供给事件处理程序。