Javascript-onchange事件处理程序函数参数工作不正常试验项目一项目二项目三 _Javascript_Jquery

Javascript-onchange事件处理程序函数参数工作不正常试验项目一项目二项目三

javascript jquery

Javascript-onchange事件处理程序函数参数工作不正常试验项目一项目二项目三 ,javascript,jquery,Javascript,Jquery,我正在尝试动态地向HTML表添加和删除行。但是生成的行包含一个带有onchange事件处理程序函数的组合框。我需要将行ID传递给该函数。当我将新ID分配给最新组合框的onchange事件处理程序时，它也在更改分配给已生成组合框的值。有人能看看这段代码并告诉我是什么导致了这里的问题吗？当您在调用loadOperators中引用lastRowID时，您得到的是当前值，因为变量不是click处理程序函数的本地变量。您不需要变量，只需使用this.id <!DOCTYPE HTML PUBLI

我正在尝试动态地向HTML表添加和删除行。但是生成的行包含一个带有onchange事件处理程序函数的组合框。

我需要将行ID传递给该函数。当我将新ID分配给最新组合框的onchange事件处理程序时，它也在更改分配给已生成组合框的值。有人能看看这段代码并告诉我是什么导致了这里的问题吗？

当您在调用

loadOperators

中引用

lastRowID

时，您得到的是当前值，因为变量不是

click

处理程序函数的本地变量。您不需要变量，只需使用

this.id

<!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>

可以使用委托，而不是每次添加行时都绑定处理程序。为所有

字段id\N

元素指定一个类（

field\u class

，在下面的示例中），并在document.ready函数中只执行一次：

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

});

我不确定真正的

loadOperators（）

函数是做什么的（您所问的显然只是一个存根），但我怀疑您可以将

这个

传递给它，而不是ID，并且您可能可以删除被克隆元素中的所有ID

如果确实需要

lastRowID

值，可以将其复制到局部变量中，该变量将在闭包中捕获

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

。live已弃用；只需使用.on即可。'loadOperators'需要参数值：1,2,3，。。等，而不是“this.id”。我不理解全局变量“lastRowID”的问题。每当我添加一个新的组合框时（即，每次单击“添加”按钮），我都会使用“lastRowID”的当前值来设置新组合框的“loadOperators”函数的值。谢谢您的回答。使用

lastRowID

而不是

this.id

还有其他方法吗？非常感谢您的回答。它解决了我的问题。

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

});