Question

所以我有一个简单的ASP.NET / C＃生成的html表单，其中我有一个文本框列表，我希望能够动态添加和/或删除。从SP生成的预先存在的文本框看起来像这样，并在下面添加“添加另一个文本框”按钮：

<tr>
    <td id="lblRole" style="vertical-align:top;" ><strong>The Role *</strong><br />(2000 characters maximum each)</td>
    <td id="rolesColumn">
        <div id="roles-1" class="div_row">
             <textarea name="ctl00$mainContent$uxRolesList$ctl01" rows="5" cols="100" 
                     id="ctl00_mainContent_uxRolesList_ctl01">yuyuy</textarea>
             <input type="button" style="vertical-align:top;" value="X" class="remove-roles-btn" /><br /><br />
        </div>
        <input type="hidden" name="ctl00$mainContent$uxTxtBoxRolesCount" 
                   id="ctl00_mainContent_uxTxtBoxRolesCount" value="1" />                             
    </td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>
        <input type="submit" name="ctl00$mainContent$uxAddRoleBtn" 
                   value="Add a new role requirement" 
                   id="ctl00_mainContent_uxAddRoleBtn" class="btn" />
    </td>
</tr>

我的jQuery是这样的：

$("#ctl00_mainContent_uxAddRoleBtn").live("click", (function (e) {


    var rolesCounter = $('#ctl00_mainContent_uxTxtBoxRolesCount').val();
    rolesCounter++;
    if (rolesCounter < 10) {
        var rolesCounterText = "0" + rolesCounter;
    } else {
        var rolesCounterText = rolesCounter;
    }

    $('#rolesColumn').append("<div id='roles-" + rolesCounter + "' class='div_row'><textarea name='ctl00$mainContent$uxRolesList$ctl" + rolesCounterText + "' rows='5' cols='100' id='ctl00_mainContent_uxRolesList_ctl" + rolesCounterText + "'></textarea><input class='remove-roles-btn' type='button' value='X' style='vertical-align:top;' /><br /><br /></div>");

        e.preventDefault();

        $('#ctl00_mainContent_uxTxtBoxRolesCount').val(rolesCounter);
    }));

    $(".remove-roles-btn").on("click", (function (e) {
        $(this).parents('.div_row').remove();
        e.preventDefault();
        var rolesCounter = $('#ctl00_mainContent_uxTxtBoxRolesCount').val();
        rolesCounter--;
        $('#ctl00_mainContent_uxTxtBoxRolesCount').val(rolesCounter);



    }));

但是当我点击添加新文本框时，所有文本框都会被删除。

当我点击删除文本框时，没有任何反应。

谢谢。

Answer 1

对于删除按钮，您需要使用事件委派

$(document).on("click", "#rolesColumn .remove-roles-btn", function (e) {
    e.preventDefault();
    $(this).closest('.div_row').remove();
    var rolesCounter = $('#ctl00_mainContent_uxTxtBoxRolesCount').val();
    $('#ctl00_mainContent_uxTxtBoxRolesCount').val(rolesCounter - 1);
});

$(document).on("click", "#ctl00_mainContent_uxAddRoleBtn", function (e) {
    var rolesCounter = $('#ctl00_mainContent_uxTxtBoxRolesCount').val();
    rolesCounter++;
    if (rolesCounter < 10) {
        var rolesCounterText = "0" + rolesCounter;
    } else {
        var rolesCounterText = rolesCounter;
    }

    $('#rolesColumn').append("<div id='roles-" + rolesCounter + "' class='div_row'><textarea name='ctl00$mainContent$uxRolesList$ctl" + rolesCounterText + "' rows='5' cols='100' id='ctl00_mainContent_uxRolesList_ctl" + rolesCounterText + "'></textarea><input class='remove-roles-btn' type='button' value='X' style='vertical-align:top;' /><br /><br /></div>");

    e.preventDefault();

    $('#ctl00_mainContent_uxTxtBoxRolesCount').val(rolesCounter);
});

演示：Fiddle

Answer 2

您的代码中有拼写错误：

$("#ctl00_mainContent_uxAddRoleBtn").live("click", (function (e) {
      //-------------------------------------------^----here you can see a "("

在这里：

$(".remove-roles-btn").on("click", (function (e) {
               //------------------^-----------------here

但我建议您使用.on()方法：

$(document).on("click", "#ctl00_mainContent_uxAddRoleBtn", function (e) {

和此：

$(document).on("click", ".remove-roles-btn", function (e) {

Answer 3

请注意，请务必使用jQuery 1.8.3或更低版本，否则无效。您所要做的就是将'on'更改为'live'

$(".remove-roles-btn").live("click", (function (e) {

这是一个simple example，其代码显示它正常工作。

jQuery添加和删除文本框 - 只删除所有内容或什么也不删除

3 个答案: