Question

很抱歉，问过很久以前被问过的问题。但我找不到解决我问题的正确解决方案。所以请将此视为后续行动。

我有一个按钮（#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)
        }
    });
});

另外，我有一个附加到这些输入字段的on change功能。这个on change函数适用于静态字段，但是当进入动态添加的字段时，它不起作用。（我已将此部分包含在内，因为我认为它们与同一问题有关。）

$('.eName').change(function() {
            if ($(this).val() != '') {
                var action = $(this).attr("id");
                var query = $(this).val();
                var result = '';
                if (action == "element_name") {
                    result = 'formulation';
                } else {
                    result = 'strength';
                }
                $.ajax({
                    url: "fetch.php",
                    method: "POST",
                    data: {
                        action: action,
                        query: query
                    },
                    success: function(data) {
                        $('#' + result).html(data);
                    }
                })
            }

这两个问题是否相关？我该如何克服这些？提前感谢您的建议。

Answer 1

附加元素后，您将创建具有相同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);
    }
  });
});

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

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

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

1 个答案: