Question

我有一张桌子和按钮＆＃34;空＆＃34;。点击清空后，表格就会消失。另一个按钮＆＃34;创建新的＆＃34;，点击后，将创建一个新表。按钮和表格都在名为＆＃34; sTable＆＃34;的div下。但是如果我先清空，那么创建新表并将按钮清空。空按钮无法正常工作。有什么建议吗？小提琴link

<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按钮

的表格

<强> Demo

改变这个：

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

到这个

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

动态按钮不适用于动态表

1 个答案: