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

我想在列表中的最后一个选择菜单中进行选择时，将选择菜单的副本追加到表格的底部。在这一点上，我只想将行为应用到表格中的最后一个选择菜单。下面的代码将行添加到表中，但未能成功解除绑定操作，因此即使在操作已解除绑定后，第一个选择菜单也会继续显示行为。JQuery添加行到表并将事件绑定到最后一个项目

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

所有建议感激收到！

Adam

来源

2009-08-20 apchester

我真的不知道你的代码是怎么回事。如何“#selectList：last”具有任何意义？你怎么能有一个“最后”的ID？ – 2009-08-20 20:21:29

他正在复制行，所以会有两个id当然是无效的 – redsquare 2009-08-20 20:26:31

更新亚当...看到我的回答 – redsquare 2009-08-20 21:52:29

为了让你工作，只需将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(); 
    }); 
};

来源

2009-08-20 20:34:24 redsquare

感谢指示改变类，而不是ID。更改我的ID后，我可以看到没有动态更新页面。我有兴趣了解如何改善JavaScript。干杯，亚当 – apchester 2009-08-20 20:45:29

在这里作品http://pastebin.me/f576b606b1bbc67794a9c8e8dcda9330 – redsquare 2009-08-20 21:32:22

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

回答

相关问题