Question

我已经使用net中找到的帖子实现了动态添加删除文本框。我成功添加了动态文本框但删除它们不起作用。请参阅我的设计和jquery

   <td style="font-size: large; vertical-align:top" >
       Mobile:
        </td>

        <td valign="top" >
            <div id="divAdd">
                <p>

                <asp:TextBox ID="txtMobile" runat="server" Width="120px"></asp:TextBox>
                <asp:ImageButton ID="add" runat="server" ValidationGroup="r" 
            ImageUrl="~/img/add.png" Height="16px" Width="16px" />

                </p>

            </div>

我的脚本是：

 $(function () {
  var addDiv = $('#divAdd');
  var i = $('#divAdd p').size() + 1;

$('#add').on('click', function () {

    $('<p><input type="text" size="100" id="p_new" name="p_new_' + i + '"/><a href="#" id="remove">Remove</a></p>').appendTo(addDiv);


    i++;
    return false;

});

$('#remove').on('click', function () {

    if (i > 2) {
        $(this).parents('p').remove();
        i--;
    }

    return false;
});

}）;

如果我更改size属性，我正在创建的动态文本框的大小也不会改变？

Answer 1

尝试更改为$(document).on('click', '#remove', function(){})。必须将on绑定到DOM中的静态元素才能正常工作。

Answer 2

试试这个：

$(function () {
  var addDiv = $('#divAdd');
  var i = $('#divAdd p').size() + 1;

$('#add').on('click', function () {

    $('<p><input type="text" size="100" id="p_new" name="p_new_' + i + '"/><a href="#" id="remove">Remove</a></p>').appendTo(addDiv);


    i++;
    return false;

});

$(document).on('click','#remove', function () {

    if (i > 2) {
        $(this).parents('p').remove();
        i--;
    }

    return false;
});

这是Fiddle DEMO

Answer 3

由于内容是动态的，您必须为删除按钮委派点击事件

试试这个

$('body').on('click','#remove','',function(e){
e.preventDefault();
     if (i > 2) {
        $(this).parents('p').remove();
        i--;
    }
});

<强> DEMO HERE

Answer 4

使用length而不是size（）;

 var i = $('#divAdd p').length;

动态删除jquery中的文本框

4 个答案: