动态按钮不适用于动态 table

Question

我有一个 table 和按钮 "empty"。点击清空后，table 就没有了。另一个按钮"create new"，点击后，将创建一个新的table。按钮和 table 都在名为 "sTable" 的 div 下。但是如果我先清空，然后创建新的 table 并将按钮清空。按钮为空将不起作用。有什么建议吗？ fiddlelink

<div id='sTable'>               
 <table width="100%" id="tbl">
  <tr><th></th>
      <th>Serial No</th>
      <th>Personale</th>
      <th>Marketing point</th>
      <th >Add/Remove</th></tr>
  <tr class="even">
  <td><input type="text" name="serial[]"  class="add increment" value="1"  size="2%" ></td>
   <td><input type="text" value="" name="Personale[]"  size="2%"></td>
   <td><input type="text" class="totaliCostiGestione" name="marketpt[]"></td>
   <td><input type="text" name="programid[]" class="add" value="34" size="10%"></td>
   <td><input type="button" class="addnew add" value="+" /></td> 
  </tr>
  <tr><td colspan="5"><input type="submit" name="submit" value="Empty" class="submit"></td>
  </tr>                     
 </table>
       <input type="submit" name="submit" value="Create New" class="create">
</div>

JS文件如下：

$('.addnew').live('click', function(){
    var thisRow = $(this).parent().parent();
    newRow = thisRow.clone(true).insertAfter(thisRow);
    newRow.find('input:not(.add)').val("");

    $(this).removeClass('addnew').addClass('remove');
    $(this).val("-");
    newRow.find('input.increment').val(parseInt(thisRow.find('input.increment').val())+1);
});

$('.remove').live('click', function(){
    $(this).parent().parent().remove();
});

$('#sTable .submit').click(function(){
        $("#tbl").empty();
    //$(' .even').css('background-color', 'blue');
});
$('.create').click(function(){
var t = "<table width='100%' id='tbl'><tr><th></th><th>Serial No</th><th>Personale</th><th>Marketing point</th><th >Add/Remove</th></tr>"
t +="<tbody><tr class='even'>"
t +="<td><input type='text' name='serial[]'  class='add increment' value='1'  size='2%' ></td>"
t +="<td><input type='text' value='' name='Personale[]'  size='2%'></td>"
t +="<td><input type='text' class='totaliCostiGestione' name='marketpt[]'></td>"
t +="<td><input type='text' name='programid[]' class='add' value='34' size='10%'></td>"
t +="<td><input type='button' class='addnew add' value='+' /></td></tr>"
t +="<tr><td colspan='5'><input type='submit' name='submit' value='Empty' class='submit'></td>"
t +="</tr></tbody></table>"
$("#sTable").append(t);

Answer 1

创建动态内容时，您可以使用 on()

委托事件

在您的情况下，您需要先获取包含 Empty 按钮的 table

Demo

改变这个：

$('#sTable .submit').click(function(){
        $("#tbl").empty();
    //$(' .even').css('background-color', 'blue');
});

至此

$('#sTable').on("click", ".submit", function () {
    $(this).parents("#tbl").empty();
});

动态按钮不适用于动态 table

dynamic button not work for dynamic table

jquery

jquery-selectors