1

我正在尝试使用 jQuery 1.9 添加和删除表单字段。它添加了一个字段就好了，但是当试图删除它时什么都没有发生。

这是HTML...

<div class="control-group spacing-top">
<label for="answer[]" class="control-label required">Answers</label>
<div id="answers" class="controls">
    <div class="answer-holder input-append">
        <input class="input-xxlarge" placeholder="Answer" name="answer[]" type="text" value="" id="answer[]">   <span class="add-on"><i class="icon-remove"></i></span>

    </div>
</div>
<button class="button button-secondary answer-add"><i class="icon-plus"></i> Add Answer</button>

这是 jQuery ......

$(function () {
    var i = $('.answer-holder').length;
    $('.answer-add').on('click', function () {
        $('<div class="input-append"><input class="input-xxlarge" name="answer[]" type="text" value="" id="answer_' + i + '"><button class="answer-delete">Remove</button></div>').appendTo($('#answers'));
        i++;
        return false;
    });

    $('.answer-delete').on('click', function () {
        $(this).parent('.answer-holder').remove();
        return false;
    });
});

有人能帮助我吗？

谢谢

4

5 回答 5

2

要做的两件事

第一的

添加class answer-holder到 div 时creating

第二

使用$(document).on('click','.answer-delete', function () {代替$('.answer-delete').on('click', function () {

完整代码

$(function () {
    var i = $('.answer-holder').length;
    $('.answer-add').on('click', function () {
        $('<div class="input-append answer-holder"><input class="input-xxlarge" name="answer[]" type="text" value="" id="answer_' + i + '"><button class="answer-delete">Remove</button></div>').appendTo($('#answers'));
        i++;
        return false;
    });

    $(document).on('click','.answer-delete', function () {
        $(this).parent('.answer-holder').remove();
        return false;
    });
});

工作小提琴

于 2013-07-09T08:27:03.460 回答
0

使用委托，顺便说一句，answer-delete父元素似乎没有.answer-holder元素：

$('#answers').on('click','.answer-delete', function () {
    $(this).closest('#answers').find('.answer-holder').remove();
    return false;
});
于 2013-07-09T08:23:29.860 回答
0

在这种情况下，您的使用on是错误的，因为answer-delete您需要使用基于事件委托的事件处理程序的动态元素

$('#answers').on('click', '.answer-delete', function () {
    $(this).parent('.answer-holder').remove();
    return false;
});
于 2013-07-09T08:23:33.323 回答
0

您需要.answer-delete像这样委托选择器：

$('#answers').on('click', '.answer-delete', function() {
  $(this).parent().remove();
});

文档：直接和委托事件

于 2013-07-09T08:24:35.777 回答
0

别人说的，你需要委托 .on 功能

但是，您的 click 函数正在寻找.answer-holder您的脚本未添加的父级，因此您需要将其添加到添加输入框的函数中。

在这里看我的小提琴

于 2013-07-09T08:27:46.020 回答