在动态添加的jQuery自动完成输入字段中更改任何输入字段时，所有输入字段都在更改

很抱歉问了这么多次的问题。但我找不到解决我问题的正确方法。因此，请考虑以下内容：

我有一个按钮（

#addNewElement

），在单击时添加一个输入字段和一个选择下拉列表。我为文本输入字段附加了

autocomplete

功能。但问题是，每当我更改任何字段的一个输入时，所有字段都会更改。为什么它们都在一起变化？我错过了什么

$("#addNewElement").click(function() {
    $('#addElement').append("<div>\n\
        <label class='form-name'>Element name: </label>\n\
        <input type='text' name='element_name[]' id='element_name' class='eName'>\n\
        </div>\n\
        <div>\n\
        <select name='formulation[]' id='formulation'>\n\
        <option value=''>Select Formulation</option>\n\
        </select>\n\
                </div>");
    $(".eName").autocomplete({
        source: 'search.php',
        select: function(event, ui) {
            $(".eName").val(ui.item.value)
        }
    });
});

---

这两个问题有联系吗？我应该如何克服这些问题？提前感谢您的建议。

当您附加元素时，您正在使用相同的

id

属性创建元素。这可能会导致各种问题。它也应该是独一无二的

id属性为HTML元素指定一个唯一的id（该值在HTML文档中必须是唯一的）

考虑以下几点：

$("#addNewElement").click(function(e) {
  var newDiv = $("<div>").appendTo("#addElement");
  $("<label>", {
    class: "form-name"
  }).html("Element Name: ").appendTo(newDiv);
  var newInp = $("<input>", {
    type: "text",
    name: "element_name[]",
    id: "element_name-" + ($("[id|='element_name']").length + 1)
  }).appendTo(newDiv);
  var newDiv2 = $("<div>").appendTo("#addElement");
  var newSel = $("<select>", {
    name: "formulation[]",
    id: "formulation-" + ($("[id|='formulation']").length + 1)
  }).appendTo(newDiv2);
  $("<option>", {
    value: ""
  }).html("Select Formulation").appendTo("newSel");
  newInp.autocomplete({
    source: 'search.php',
    select: function(event, ui) {
      newInp.val(ui.item.value);
    }
  });
});

$（“#添加新元素”）。单击（函数（e）{
var newDiv=$（“”）。附加到（“#addElement”）；
$("", {
类：“表单名称”
}).html（“元素名称：”）.appendTo（newDiv）；
var newInp=$（“”{
键入：“文本”，
名称：“元素名称[]”，
id:“元素名称-”+（$（“[id |='element_name']”）。长度+1）
}).附录（新分部）；
var newDiv2=$（“”）。附加到（“#addElement”）；
var newSel=$（“”{
名称：“配方[]”，
id:“公式-”+（$）（“[id |='formulation']”）。长度+1）
}).附录（新分部2）；
$("", {
值：“”
}).html（“选择公式”）.appendTo（“newSel”）；
newInp.autocomplete({
来源：“search.php”，
选择：功能（事件、用户界面）{
newInp.val（ui.item.value）；
}
});
});

这只是确保每个元素都有一个唯一的ID。您也可以在HTML字符串中执行此操作。我发现jQuery对象在创建时看起来更干净，更易于操作

---

此外，由于元素是创建并存储到变量中的，因此在创建和更新自动完成时，您可以将该特定元素作为目标。

添加元素时，您创建的元素具有相同的

id

属性。这可能会导致各种问题。它也应该是独一无二的

id属性为HTML元素指定一个唯一的id（该值在HTML文档中必须是唯一的）

考虑以下几点：

$("#addNewElement").click(function(e) {
  var newDiv = $("<div>").appendTo("#addElement");
  $("<label>", {
    class: "form-name"
  }).html("Element Name: ").appendTo(newDiv);
  var newInp = $("<input>", {
    type: "text",
    name: "element_name[]",
    id: "element_name-" + ($("[id|='element_name']").length + 1)
  }).appendTo(newDiv);
  var newDiv2 = $("<div>").appendTo("#addElement");
  var newSel = $("<select>", {
    name: "formulation[]",
    id: "formulation-" + ($("[id|='formulation']").length + 1)
  }).appendTo(newDiv2);
  $("<option>", {
    value: ""
  }).html("Select Formulation").appendTo("newSel");
  newInp.autocomplete({
    source: 'search.php',
    select: function(event, ui) {
      newInp.val(ui.item.value);
    }
  });
});

$（“#添加新元素”）。单击（函数（e）{
var newDiv=$（“”）。附加到（“#addElement”）；
$("", {
类：“表单名称”
}).html（“元素名称：”）.appendTo（newDiv）；
var newInp=$（“”{
键入：“文本”，
名称：“元素名称[]”，
id:“元素名称-”+（$（“[id |='element_name']”）。长度+1）
}).附录（新分部）；
var newDiv2=$（“”）。附加到（“#addElement”）；
var newSel=$（“”{
名称：“配方[]”，
id:“公式-”+（$）（“[id |='formulation']”）。长度+1）
}).附录（新分部2）；
$("", {
值：“”
}).html（“选择公式”）.appendTo（“newSel”）；
newInp.autocomplete({
来源：“search.php”，
选择：功能（事件、用户界面）{
newInp.val（ui.item.value）；
}
});
});

这只是确保每个元素都有一个唯一的ID。您也可以在HTML字符串中执行此操作。我发现jQuery对象在创建时看起来更干净，更易于操作

---

此外，由于元素是创建并存储到变量中的，因此您可以在创建和更新自动完成时以该特定元素为目标。

如果可能，您是否可以发布一个可用的fiddle。发布html并将其作为snippet或fiddle对于第一个问题，该类是有罪的。如果要在类发生更改时更新所有元素，请尝试使用

$（this.val（ui.item.value）

。关于第二个问题，请参考《魔兽世界》@卡达！谢谢。解决了第一个问题。在解决第二个问题的过程中。如果可能的话，你可以发布一个工作的fiddle吗。发布你的html并将其作为代码片段或fiddle。对于第一个问题，类是有罪的。如果要在类发生更改时更新所有元素，请尝试使用

$（this.val（ui.item.value）

。关于第二个问题，请参考《魔兽世界》@卡达！谢谢。解决了第一个问题。在解决第二个问题的路上。