单击删除按钮时为什么它不起作用?

时间:2012-06-25 09:28:04

标签: jquery asp.net

这是我项目的第一部分:

<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>
</div>

第二个:按钮的事件处理程序:

function createInputTexts() {

    var trOrigin = $("#printsizescroll");
    var trClone = trOrigin.clone(true);
    var target = $("#printTbl tr:last-child").prev();
    trClone.find(":button").val("Delete").bind("click", function () {
        $(this).parent().parent().parent().remove();
    });
    trClone.css('display', '');
    // Here you can also set new ID.
    target.after(trClone);
}

当我点击删除按钮时,它不起作用,为什么它以这种方式起作用? 我尝试通过click()替换bind()方法来实现它,这是bind()方法的截止,但我很遗憾地发现它仍然失败。

1 个答案:

答案 0 :(得分:0)

您需要尝试使用委托事件处理程序,例如 .on()

$('#printTbl').on('click','input[type=button][value=Delte]', function() {
  $(this).parent().parent().parent().remove();
});

这会将click事件绑定到动态附加到DOM的所有button value=Delte。你不需要在循环中绑定。

注意

检查Delte

Delete