Question

这是我的HTML：

<div id="container">
    <input type="button" id="add" value="New Thing">
    <div id="addNew_1" class="new">
        <select name="select_1">
            <div id="options">
                <option value="nothing">Nothing</option>
                <option value="snothing">Second Nothing</option>
            </div>
        </select>
        <input type="text" id="input_1" value="Here goes your stuff">
        <input type="button" id="newField_1" value="New Field For Stuff">
        <br>
        <br>
    </div>
</div>

这是我的jQuery：

$(document).ready(function () {
    var select = 1;
    var divid = 1;
    var options = $('#options');
    $('#newField_' + divid).on('click', function () {
        select++;
        var content = '<select name=select_' + select + '>' + options + '</select><input type="text" name="input_' + select + '" value="Here goes your stuff"><input type="button" class="remove"  id="remove_' + select + '"  value="Remove this field!"><br><br>';
        $('#addNew_' + divid).append(content);
        $('.remove').on('click', remThis);
    });

    function remthis() {
        $(this).parents('div').remove();
    }
    $('#add').on('click', function () {
        divid++;
        select++;
        var thing = '<div id="addNew' + divid + '" class="new"><select name=select_' + select + '>' + options + '</select><input type="text" name="input_' + select + '" value="Here goes your stuff"><input type="button" id="newField_' + divid + '" value="New Field For Stuff"></div><br><br>';
        $('#container').append(thing);
    });

});

此脚本的目的是通过单击“Add New Field For Stuff”在父div中添加一个select和一个输入字段，并通过单击“New Thing”按钮添加具有相同内容的新div。我被困在哪里：

我想动态添加/删除每个生成的div中的每个字段。我已设法添加字段，但只在显示div时添加来自HTML。如果我生成另一个，我就不能再那样做了。一世不明白！
我想动态添加/删除div。我再说一次设法添加新的div，但我不知道如何动态删除div。
我想在每个div上添加一个标题（例如Div＃1， Div＃2 ...等）所以当我删除第二个div时，例如用户仍然可以看到Div＃1，Div＃2，Div＃3等...
另一个问题是我无法在每个生成的选项上添加选项。我需要添加选择这种方式因为我将使用php获取每个div的值，如果我给每个人都给同一个名字，我就不能把它发给一个形成。所以我需要在每个输入类型上都有一个不同的名称选择我生成。

我是新手，3天前我不知道jQuery。

Answer 1

您需要使用委托on事件来动态添加元素

试试这个

 $('#container').on('click','#newField_' + divid, function () {
   .....

如果你使用class而不是id ...

，这将非常容易

<div class="addNew" class="new">
..
<input type="text" class="input" value="Here goes your stuff">
<input type="button" class="newField" value="New Field For Stuff">

并使用类选择器..

$('#container').on('click','.newField', function () {
   .....

无需关注divid和select及其计数器

注意：您错过了输入元素的名称属性

<强>更新

使用clone()因为我认为你正在创建相同的元素并附加它...你可以将你的名字作为数组发布到PHP，这样你就可以使用循环来获取所有输入值

$('#container').on('click','.newField', function () {
      var newthing=$('div.addNew:first').clone()
                                        .find('.newField')
                                        .removeClass('newField')
                                        .addClass('remove')
                                        .val('Remove Field!')
                                        .end();

     $('#container').append(newthing);
});

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

    $(this).parent().remove();
});


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

    var thing=$('div.addNew:first').clone();
    $('#container').append(thing);
});

小提琴here

使用jQuery和HTML动态添加/删除项目

1 个答案: