复选框事件处理程序抛出错误的点击事件在chrome浏览器，safari工作良好的键盘事件

checkbox event handler throws error for click event in chrome, safari works fine with keyboard event

本文关键字：事件 safari 浏览器 工作 键盘 chrome 错误 出错 事件处理 复选框 程序      更新时间：2023-09-26

我有一个动态创建的复选框列表。当复选框的状态发生变化时，将执行一个函数。无论用户是单击复选框，还是使用键盘输入更改复选框，该功能在firefox 3.6中都能完美运行。在chrome或safari中，该函数在使用键盘时执行得很好，但在单击鼠标时就会出错。我似乎找不到为什么代码的行为不同于鼠标点击和键盘输入。

下面是我认为是相关的代码:

var q_id = $j('label:contains("SCORP Statewide Need ")').attr('for');
console.log(q_id); //writes out answer id a_721

ajax post将创建一个复选框列表:

if(found == true){
    output+="<div name='"+q_id+"'><input type='checkbox' name='"+q_id+"' id='"+q_id+"."+i+"' class='check' checked='checked' onChange='saveStateNeed("+q_id+")' value='"+list[i]+"'/>"; 
}else{
    output+="<div name='"+q_id+"'><input type='checkbox' name='"+q_id+"' id='"+q_id+"."+i+"' class='check' onChange='saveStateNeed("+q_id+")' value='"+list[i]+"'/>";
}
output+=" <label name='l_"+q_id+"' for='"+q_id+"."+i+"' id='l_"+q_id+"."+i+"'>"+ list[i] +"</label></div>";
output+="<div class='clearboth'></div><br/>";
$j('##div_'+q_id).append(output);

所有这些都可以在所有浏览器中完美生成。错误在回调函数saveStateNeed();

function saveStateNeed(list){
    console.log('in saveStateNeed');

    console.log(list);// prints out an array of the checkboxes [input#a_721.0.check Non-motorized trails, input#a_721.1.check Sports a...ayfields, input#a_721.2.check Land Acq...projects, input#a_721.3.check Picnicki...cilities, input#a_721.4.check Nature s...wildlife]
           // **in safari i get function()** but it still works with keyboard, fails with click
           // the next assignment $me fails.
    var $me = $j('input [name="'+list+'"]');
    var isChecked = $me.context.activeElement.checked;
    var $value = $me.context.activeElement.attributes['value'].nodeValue;

    console.log($me); out puts the object selected as an expandable firebug object []

    console.log($value); outputs label for object: Picnicking/day use facilities

    console.log(isChecked); outputs true false
    if(isChecked){
    }else{
    }
    $j.ajax({
        type: "POST",
        url:        });
}

这是一种复杂的，我只是希望有人知道为什么我会得到一个不同的结果从点击然后键盘输入，当相同的代码实际上正在执行。我真的希望这不会太复杂。谢谢你看这个，我真的很感谢你的任何评论或建议。欢呼。

如果您将复选框行为附加为委托事件而不是显式赋值，您可能会有更好的运气。

看起来你在使用jQuery，所以你可以这样做:

$j('input.check').live('change', function(event) {
   var jThis = $j(this);
   // grab id from checkbox
   var ID = jThis.attr('id').split('.')[0];
   saveStateNeed(ID, jThis.attr('checked'));
   return true;
});

也:你确定错误是在事件处理程序，而不是在saveStateNeed函数?

编辑:根据你的更新，这是我得到的。首先，注意上面函数的小改动;现在它传递两个值。其次，如果希望对正在切换的复选框进行操作，请修改saveStateNeed以接受两个值:ID和布尔值。像这样:
function saveStateNeed(ID, bChecked) {
    console.log('checkbox ' + ID + ' is ' + (bChecked) ? 'checked' : 'not checked');
    if(bChecked) {
        // do something
    } else {
        // do something else
    }
}
相关文章：