Question

当我在列表的最后一个选择菜单中进行选择时，我试图将选择菜单的副本附加到表格的底部。此时我只想将行为应用于表格中的最后一个选择菜单。下面的代码将行添加到表中，但无法成功取消绑定操作，因此即使操作未绑定，第一个选择菜单也会继续显示该行为。

使用Javascript：

var selectRow;
$(document).ready(function() {
    selectRow = $('#selectWrapper').html();
    rebindLastSelectBox();  
});

function rebindLastSelectBox() {
    $('#selectList:last').change(function(e) {          
                $(this).unbind('change');
        $('table').append("<tr id='selectWrapper'>" + selectRow + "</tr>");
                rebindLastSelectBox();
   });
};

HTML：

<head>
    <title>JS Test</title>
    <script src="./js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="./js/application.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<table>
    <tr>
        <td>Title</td><td><input type="text" name="some_name" value="" id="some_name"></td>
    </tr>
    <tr id='selectWrapper'> 
        <td>Items</td><td><select name="items[]" id="selectList" size="1">
            <option value="1">Item 1</option>
            <option value="2">Item 2</option>
        </select></td>
    </tr>
</table>
</body>

感谢所有建议！

亚当

Answer 1

为了让你工作，只需将id更改为tr和select上的类。 js可以改进，但让你先工作。

<head>
    <title>JS Test</title>
    <script src="./js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="./js/application.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<table>
    <tr>
        <td>Title</td><td><input type="text" name="some_name" value="" id="some_name"></td>
    </tr>
    <tr class='selectWrapper'>     
        <td>Items</td><td><select name="items[]" class="selectList" size="1">
                <option value="1">Item 1</option>
                <option value="2">Item 2</option>
        </select></td>
    </tr>
</table>
</body>

var selectRow;
$(document).ready(function() {
    selectRow = $('tr.selectWrapper').html();
    rebindLastSelectBox();  
});

function rebindLastSelectBox() {
    $('select.selectList:last').change(function(e) {                  
        $(this).unbind('change');
        $('table').append("<tr class='selectWrapper'>" + selectRow + "</tr>");
        rebindLastSelectBox();
   });
};

JQuery将行添加到表并仅将事件绑定到最后一项

1 个答案: