javascript - 如何在数组中使用 jQuery 绑定(bind)或 addEventListener？

Question

我想在 radio 输入的每次模糊或单击或焦点事件上获取检查的 radio 输入的值。

function getCheckedVal(){
    var checked = $('#education_number input:radio:checked')
    console.log(checked.val());
};

这不起作用:

window.onload = function(){
    var radio = $('#education_number input:radio');
    for(var i=0; i<radio.length; i++){
        radio[i].addEventListener('blur', function(){getCheckedVal()});
        };
    }

这是引发异常:

window.onload = function(){
    var radio = $('#education_number input:radio');
    for(var i=0; i<radio.length; i++){
        radio[i].bind('blur', getCheckedVal());
        };
    }

Uncaught TypeError: Object #HTMLInputElement has no method 'bind'

如何做到这一点？

Answer 1

在第二个示例中，您调用 getCheckedVal然后将其返回值传递给 bind 。你不想要那些()之后getCheckedVal :

window.onload = function(){
    var radio = $('#education_number input:radio');
    for(var i=0; i<radio.length; i++){
        $(radio[i]).bind('blur', getCheckedVal);
    }
}

(请注意，我在 $(...) 周围添加了 radio[i] ，因为 radio[i] 是原始 DOM 元素，而不是 jQuery 对象。)

但是您可以极大地简化该代码:

window.onload = function(){
    $('#education_number input:radio').blur(getCheckedVal);
}

jQuery 是非常基于集合的。您可以对整个匹配的元素集进行操作，而不是自己循环遍历该集。

不过有两件事需要考虑:

• 您真的只想要有关模糊的信息吗？不在 change例如？
• 您真的要等到 window#load事件来连接你的事件处理程序？这是页面加载过程中非常的最后阶段，在所有图像等都完成加载之后。而不是使用 window#load ，考虑将脚本放在最后，就在结束 </body> 之前标签，或使用 jQuery 的 ready function .