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

i have a list of dynamically created check boxes. when the state of the check box changes, a function is executed. the function runs perfectly in firefox 3.6 perfectly whether the user clicks the check box, or uses keyboard input to change the check box. in chrome or safari, the function executes fine using the keyboard, but errors out with a mouse click. i cannot seem to find why the code acts differently from a mouse click vs a keyboard entry.

here is what i believe is the pertinent code:

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

an ajax post will create a list of check boxes:

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

all this is generated perfectly in all browsers. the error is in开发者_如何学编程 the callback 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:        });

}

this is all kind of convoluted, im just hoping someone knows why i would get a different result from a click then a keyboard entry, when the same code is actually being executed. i really hope this isnt all too convoluted. thanks for taking a look at this, and i really appreciate any comments or suggestions you might have. cheers.

You might have better luck if you attach the checkbox behavior as a delegated event instead of explicit assignment.

It looks like you're using jQuery, so you can do that like so:

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

Also: are you certain that the error is in the event handler, and not in the saveStateNeed function?

EDIT: Based on your updates, here's what I've got. First, note the minor change to the function above; now it passes two values. Second, if you want to act on a checkbox being toggled, modify saveStateNeed to accept two values: an ID and a boolean. Like so:

function saveStateNeed(ID, bChecked) {
    console.log('checkbox ' + ID + ' is ' + (bChecked) ? 'checked' : 'not checked');

    if(bChecked) {
        // do something
    } else {
        // do something else
    }
}