Passing Variables To onChange Event with jQuery .change()
I'm writing a simple web application and have hit a stumbling block of sorts - I've already found a workaround, but I'd like to understand what I'm doing wrong having scoured the jQuery documentation.
开发者_运维知识库I have a function, that when called from the page, inserts a table row:
var rowCount = 0;
function addRow(tbody){
$("#"+tbody).append(
$('<tr>').attr('id','row_'+rowCount).append(
$('<td>').append('Content'),
$('<td>').append($('<input>').addClass('text').attr('readOnly','readOnly')),
$('<td>').append($('<input>').addClass('text').attr('readOnly','readOnly')),
$('<td>').attr('id','barcode_cell'+rowCount),
$('<td>').append($('<input>').addClass('text').addClass('quantity').attr('maxLength',3)),
$('<td>').append($('<select>').change(function(){isMissing(this,rowCount)}))
)
);
}
Where I am primarily concerned with the final <select>
box and it's onChange event. My isMissing function:
function isMissing(elem, counter){
alert(elem.value);
alert(counter);
}
What happens is the selected value of the box alerts as expected, however, the row number always alerts the latest row, regardless of which row is calling it. Instead I want it to hold the value of the rowCount variable as it was when the row was introduced, not the latest value of the variable after I have added additional rows.
What am I doing wrong? How do I force the variable to remain static? I have to use a global variable as there is more than one function that adds rows to more than one table, this is the only way I can ensure each row in any table has a unique identifier.
This hapens because rowCount
in global scope. You can make something like this inside you addRow method:
function addRow(tbody){
var internalVariable = rowCount;
$("#"+tbody).append(
$('<tr>').attr('id','row_'+rowCount).append(
$('<td>').append('Content'),
$('<td>').append($('<input>').addClass('text').attr('readOnly','readOnly')),
$('<td>').append($('<input>').addClass('text').attr('readOnly','readOnly')),
$('<td>').attr('id','barcode_cell'+rowCount),
$('<td>').append($('<input>').addClass('text').addClass('quantity').attr('maxLength',3)),
$('<td>').append($('<select>').change(function(){isMissing(this,internalVariable)}))
)
);
精彩评论