Question

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TEST</title>

<link rel="stylesheet" type="text/css" href="/js/jquery-ui-1.8.24.custom.css" media="screen, projection">
<script type="text/javascript" src="/js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.24.custom.min.js"></script>


<script type="text/javascript">
<!--

function loadOperators(rowID)
{
    alert("ROW: " + rowID);
}

var lastRowID = 1;

// Add new row
$('input#addrow').live('click', function(){

    lastRowID += 1;

    var $clonedRow = $('tr#row_1').clone();

    // manipulating new ids for the elements in the newly created row
    $clonedRow.find('*').andSelf().filter('[id]').each(function() {
        var string = this.id;

        pos = string.lastIndexOf('_');

        var tempStr = string.substr(0, pos);

        this.id = tempStr + "_" + lastRowID;
    });

    $clonedRow.insertBefore("#clone_table tr#spacer_row");

    $("#field_id_" + lastRowID).on('change', function(){
        loadOperators(lastRowID);
    });

});



// Delete a row
$('input#delrow').live('click', function(){

    if(lastRowID == 1)
    {
        return;
    }

    $('tr#row_' + lastRowID).remove();

    lastRowID -= 1;
});



$(document).ready(function() {

    loadOperators(lastRowID);

    $("#field_id_1").on('change', function(){
        loadOperators(lastRowID);
    });
});

//-->
</script>

</head>

<body>

<table id="clone_table" width="700" cellpadding="0" border="0">

<colgroup>
    <col width="200">
    <col width="200">
    <col width="200">
</colgroup>

<tr id="row_1">
    <td>
        <select name="field_id_1" id="field_id_1">
            <option value="1">Item One</option>
            <option value="2">Item Two</option>
            <option value="3">Item Three</option>       
        </select>
    </td>

    <td id="operator_strip_1"></td>

    <td id="">&#160;</td>   
</tr>

<tr id="spacer_row"><td colspan="3">&#160;</td></tr>

<tr><td colspan="3">&#160;</td></tr>

<tr><td colspan="3"><input type="button" id="addrow" value="More" /> <input type="button" id="delrow" value="Less" /></td></tr>

</table>

</body>
</html>

我正在尝试动态地向HTML表添加和删除行。但生成的行包含一个带有 onchange 事件处理函数的组合框。我需要将行ID传递给该函数。当我将新ID分配给最新的组合框的 onchange 事件处理程序时，它也会更改分配给已生成的组合框的值。任何人都可以查看此代码并告诉我这里导致问题的原因是什么？

Answer 1

当您在lastRowID的调用中引用loadOperators时，您将获得当前值，因为该变量不是click处理函数的本地变量。您不需要变量，只需使用this.id。

$('input#addrow').live('click', function(){

    lastRowID += 1;

    var $clonedRow = $('tr#row_1').clone();

    // manipulating new ids for the elements in the newly created row
    $clonedRow.find('*').andSelf().filter('[id]').each(function() {
        var string = this.id;

        pos = string.lastIndexOf('_');

        var tempStr = string.substr(0, pos);

        this.id = tempStr + "_" + lastRowID;
    });

    $clonedRow.insertBefore("#clone_table tr#spacer_row");

    $("#field_id_" + lastRowID).on('change', function(){
        loadOperators(this.id);
    });

});

您可以使用委托来代替每次添加行时绑定处理程序。为所有field_id_N元素提供一个类（在下面的示例中为field_class），并在document.ready函数中执行一次：

$("#clone_table").on('change', '.field_class', function() {
    loadOperators(this.id);
});

我不确定真正的loadOperators()函数是做什么的（问题中的那个显然只是一个存根），但我怀疑你可以将this传递给它而不是ID，你可以摆脱克隆元素中的所有ID。

如果您确实需要lastRowID值，则可以将其复制到局部变量中，该变量将在闭包中捕获。

$('input#addrow').live('click', function(){

    lastRowID += 1;
    var thisRowID = lastRowID;

    var $clonedRow = $('tr#row_1').clone();

    // manipulating new ids for the elements in the newly created row
    $clonedRow.find('*').andSelf().filter('[id]').each(function() {
        var string = this.id;

        pos = string.lastIndexOf('_');

        var tempStr = string.substr(0, pos);

        this.id = tempStr + "_" + lastRowID;
    });

    $clonedRow.insertBefore("#clone_table tr#spacer_row");

    $("#field_id_" + lastRowID).on('change', function(){
        loadOperators(thisRowID);
    });

});

Javascript - onchange事件处理函数参数无法正常工作

1 个答案: