当我单击已绑定click事件的删除按钮时,我无法删除我的克隆节点

时间:2012-06-26 02:34:42

标签: jquery

我的代码的第一个片段,位于名为sys_Param.aspx的文件中:

<div id="div_water" style="display: none" align="center">  
<table width="100%" border="0" id="printTbl" align="center" cellpadding="5" cellspacing="1" class="table">
    <tr class="TR_BG_list" id="printsizescroll" style="display:none">
        <td align="right" class="list_link" style="width: 214px">
        Resize the pictrue:
        </td>
        <td align="left" class="list_link">
            Description:
        <asp:TextBox ID="PrintSizeDec" runat="server" CssClass="form"  style="width: 106px"/>
         width|height:
        <asp:TextBox ID="PrintSmallSize" runat="server" CssClass="form"  style="width: 50px"/>
&nbsp;
        <label>
             <input type="button" name="PintSizeAddClick" value="Add" class="form" id="ButtonAdd" style="width: 44px" onclick="createInputTexts(this)" />
        </label>
       <span class="helpstyle" style="cursor: help;" title="Click to get some help" onclick="Help('H_WaterParam_0008',this)">Help</span>
    </td>
    </tr>
    <tr class="TR_BG_list">
<td align="center" colspan="2" class="list_link">
    <label>
    <input type="submit" name="Savewater" value=" Submit " class="form" id="Savewater" runat="server" onserverclick="Savewater_ServerClick" />
    </label>
&nbsp;&nbsp;
        <label>
    <input type="reset" name="Clearwater" value=" Reset " class="form" id="Clearwater" runat="server" />
    </label>
</td>
</tr>
</table>

另一部分:事件处理程序:

function createInputTexts() {

    var trOrigin = $("#printsizescroll");
    var trClone = trOrigin.clone(true);
    var target = $("#printTbl tr:last-child").prev();

    trClone.find(":button").val("delete");
    $('#printTbl').on('click', 'input[type="button"][value="delete"]', function () {
        $(this).parent().parent().parent().remove();
    });   
    trClone.css('display', '');
    // Here you can also set new ID.
    target.after(trClone);
}

问题是:当我单击删除按钮时,它不会删除由jQuery动态创建的新克隆行。我很困惑,因为我已将click事件绑定到每个删除按钮。 我需要一些帮助,谢谢你们。

1 个答案:

答案 0 :(得分:0)

看看这是否是您想要的效果:http://jsfiddle.net/qV4jG/16/

克隆的按钮仍然具有onclick属性,因此我在绑定点击事件之前将其删除,如本部分所示:

  trClone.addClass("deleteBtn"+i).find(":button").val("delete").removeAttr('onclick').click(function() {
      $(this).parent().parent().parent().remove();
  });