0

这是我的 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 中添加一个选择和一个输入字段，并通过单击“New Thing”按钮添加一个具有相同内容的新 div。我被困在哪里：

  • 我想动态添加/删除每个生成的 div 中的每个字段。我设法添加了字段，但它仅在显示来自 html 的 div 时添加。如果我生成另一个，我不能再这样做了。我不明白！
  • 我想动态添加/删除 div。同样，我设法添加了新的 div，但我不知道如何动态删除 div。
  • 我想在每个 div 上添加一个标题（例如 Div #1、Div#2...等），所以当我删除第二个 div 时，用户仍然可以看到 Div #1、Div#2、Div#3 ， ETC...
  • 另一个问题是我无法在每个生成的 . 我需要以这种方式添加选项，因为我将使用 php 为每个 div 取值，如果我给每个 div 赋予相同的名称，我就不能在表单中发布它。所以我需要在每种输入类型上使用不同的名称并选择我生成。

我是新手，3天前我对jQuery一无所知。

4

1 回答 1

2

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

试试这个

 $('#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 () {
   .....

无需照顾dividandselect和它的柜台

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

更新

使用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);
});

在这里摆弄

于 2013-06-29T13:39:13.753 回答