jquery - 使用 jQuery .change() 将变量传递给 onChange 事件

Question

我正在编写一个简单的 Web 应用程序，但遇到了某种障碍 - 我已经找到了解决方法，但我想在浏览 jQuery 文档后了解我做错了什么。

我有一个函数，当从页面调用时，插入一个表行:

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

我主要关心的是最终的<select>框，它是 onChange 事件。我的 isMissing 函数:

function isMissing(elem, counter){
  alert(elem.value);
  alert(counter);
}

所发生的情况是框的选定值按预期进行警报，但是，行号始终警报最新行，无论哪一行调用它。相反，我希望它保存 rowCount 变量的值，就像引入行时一样，而不是添加其他行后变量的最新值。

我做错了什么？如何强制变量保持静态？我必须使用全局变量，因为有多个函数将行添加到多个表中，这是我可以确保任何表中的每一行都有唯一标识符的唯一方法。

Answer 1

发生这种情况是因为 rowCount 在全局范围内。您可以在 addRow 方法中进行类似的操作:

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