复选框事件处理程序抛出错误的Chrome浏览器中的点击事件，Safari浏览器与键盘事件正常工作

Question

我有一个动态创建的复选框的列表。当复选框的状态改变时，执行一个功能。无论用户点击复选框还是使用键盘输入来更改复选框，该功能都可以在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后会创建的复选框列表：

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:  }); 

} 

这是所有类型的令人费解的，我只是希望有人知道我为什么会从一个点击，然后在键盘上输入，实际上是被执行相同的代码时，得到不同的结果。 我真的希望这不是太复杂。 感谢您看看这个，我真的很感谢您可能有任何意见或建议。 欢呼声。

Answer 1

如果您将复选框行为作为委托事件而不是显式分配，那么您可能会有更好的运气。

它看起来像你使用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 
    } 
}