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添加行到表並將事件綁定到最後一個項目

回答

相關問題