javascript - 如何正确地将ajax响应分配给动态添加的字段

Question

我有一个按钮 (#addNewElement)，可在单击时添加输入字段和选择下拉列表。当输入字段更改时，它会发送 ajax 请求并返回相应选择框的 options。但问题是，当我更改任何动态选择选项的选项时，所有其他选择选项也会更改。我该如何解决这个问题？

我一直在寻找将响应正确分配给特定动态字段的方法一段时间，但没有得到正确的解释。

$("#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' class='formulation'>\n\
        <option value=''>Select Formulation</option>\n\
        </select>\n\
                </div>");
            $('.eName').on('change', function() { //Am I targeting all the eName?
                if ($(this).val() != '') {
                    var action = 'element_name';
                    var query = $(this).val();
                    $.ajax({
                        url: "fetch.php",
                        method: "POST",
                        data: {
                            action: action,
                            query: query
                        },
                        success: function(data) {
                            $('.formulation').html(data); //Am I changing all the formualtions?
                        }
                    })
                }
            });

之前:

添加元素并更改其公式后，第一个元素也发生了更改......

预先感谢您的建议。

Answer 1

您需要找到当前输入对应的select。

1. 修改您的 HTML，将 input 和 select 封装在一个包装器中
2. 使用closest获取该包装器，然后找到其中的select(您必须保存$(this) 首先在 var 中)

基本上，

$this.closest('.wrapper').find('.formulation')

// change here (in HTML structure)
$("#addNewElement").click(function() {
  $('#addElement').append("<div class='wrapper'>\n\
<label class='form-name'>Element name: </label>\n\
<input type='text' name='element_name[]' id='element_name' class='eName'>\n\
<select name='formulation[]' id='formulation' class='formulation'>\n\
<option value=''>Select Formulation</option>\n\
</select>\n\
</div>");
});


$(document).on('change', '.eName', function() { //Am I targeting all the eName?
  // change here 
  var $this = $(this);


  if ($(this).val() != '') {


    // change here (for testing only, will change bgcolor of current select)
    $this.closest('.wrapper').find('.formulation').css('background', 'red');


    var action = 'element_name';
    var query = $(this).val();
    var result = 'formulation'; //Am I targeting all formualtions?
    $.ajax({
      url: "fetch.php",
      method: "POST",
      data: {
        action: action,
        query: query
      },
      success: function(data) {
        // change here 
        $this.closest('.wrapper').find('.formulation').html(data); //Am I changing all the formualtions?
      }
    })
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addNewElement">add</button>
<div id="addElement"></div>