Question

我正在尝试获取一个表单来动态添加更多带有id的输入字段，这些字段也是动态生成的。我有大部分工作，除了fieldset id取最后一个输入字段的名称而不是原始字段集（如果你检查字段集的id，它说“fenceType2”而不是“fenceDescription2”）。如果有人能解释我哪里出错了，我将非常感谢！非常感谢！这是代码的小提琴 - http://jsfiddle.net/gv0029/dyJjA/ - 这里是代码： HTML：

<div id="inputFence1" class="clonedInputFence">
    <fieldset id="fenceDescripton">
        <legend><strong>Fence Description</strong>

        </legend>Fence Description:
        <select name="fenceHeight" id="fenceHeight">
            <option value="select">Select Fence Height</option>
            <option value="6" id="fH6">6 Ft.</option>
        </select>
        <select name="fenceType" id="fenceType">
            <option value="select">Select Fence Type</option>
            <option value="wr1" id="wr1">WRC #1</option>
        </select>
    </fieldset>
</div>
<input type="button" id="btnAddFence" value="Add Another Fence" />
<input type="button" id="btnDelFence" value="Remove Fence" />

JS：

//Dynamic Fence Input Fields
$('#btnAddFence').click(function () {
    var num = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have
    var newNum = new Number(num + 1); // the numeric ID of the new input field being added

    // create the new element via clone(), and manipulate it's ID using newNum value
    var newElem = $('#inputFence' + num).clone().attr('id', 'inputFence' + newNum);

    //Fence Description 
    newElem.children($("select[name=fenceHeight] option:selected")).attr('id', 'fenceHeight' + newNum).attr('name', 'fenceHeight' + newNum);
    newElem.children($("select[name=fenceType] option:selected")).attr('id', 'fenceType' + newNum).attr('name', 'fenceType' + newNum);
    $('#inputFence' + num).after(newElem);

    // enable the "remove" button
    //$('#btnDel').attr('disabled','');
    $('#btnDelFence').removeAttr('disabled');

    // business rule: you can only add 5 names
    //if (newNum == 5)
    //$('#btnAdd').attr('disabled','disabled');
});

$('#btnDelFence').click(function () {
    var num = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have
    $('#inputFence' + num).remove(); // remove the last element

    // enable the "add" button
    //$('#btnAdd').attr('disabled','');
    $('#btnAddFence').removeAttr('disabled');

    // if only one element remains, disable the "remove" button
    if (num - 1 == 1) $('#btnDelFence').attr('disabled', 'disabled');
});

$('#btnDelFence').attr('disabled', 'disabled');

感谢任何和所有帮助！再次感谢！

Answer 1

喜欢这个 DEMO

  //Fence Description 
  newElem.children('fieldset').attr('id', 'fenceDescripton'+newNum);
  newElem.children("select[name=fenceHeight] option:selected").attr('id', 'fenceHeight' +  newNum).attr('name', 'fenceHeight' + newNum);
  newElem.children("select[name=fenceType] option:selected").attr('id', 'fenceType' + newNum).attr('name', 'fenceType' + newNum);
  $('#inputFence' + num).after(newElem);

Answer 2

来自.children()

.children（）方法与.find（）的不同之处在于.children（）只沿DOM树向下移动一个级别，而.find（）可以遍历多个级别以选择后代元素（孙子等）同样。

由于您提供了$(...)而不仅仅是选择器字符串，children似乎选择了克隆div的直接子节点，即fieldset。

所以，你应该进行两次修改

使用.find()代替children
使用选择器 string

newElem.find("select[name=fenceHeight]").attr('id', 'fenceHeight' + newNum).attr('name', 'fenceHeight' + newNum);
newElem.find("select[name=fenceType]").attr('id', 'fenceType' + newNum).attr('name', 'fenceType' + newNum);

请参见修改后的JSFiddle

Answer 3

嘿，我实际上想出了如何解决这个问题。首先，我删除了代码的不同部分之间的单独ID，以使其更易于管理，然后我改变了我尝试创建newElements的方式：

 newElem.children($("select[name=fenceHeight] option:selected")).attr('id', 'fenceHeight' + newNum).attr('name', 'fenceHeight' + newNum);

到：

newElem.find(':input[name="railQuantity"]').attr('id', 'railQuantity' + newNum).attr('name', 'railQuantity' + newNum);

主要问题显然是我的选择。谢谢你们的帮助！非常感谢！

Fieldset的动态命名

3 个答案: