Question

如何针对添加的每一行定位当前id-result元素？

现在我在这里添加新行

function addFilterRow() {
  html = '<tr id="filter-row">';
  html += '  <td class="text-left">';
  html += '  <select id="company" name="company[]" class="form-control">';
  html += '  {% for company in damask_company %}';
  html += '  <option name="{{ company.filter_group_id }}" value="{{ company.filter_group_id }}">{{ company.name }}</option>';
  html += '  {% endfor %}';
  html += '  </select>';
  html += '</td>';
  html += '<td class="text-left" id="result"></td>';
  html += '</tr>';
  $('tbody').append(html);
}

这是我尝试附加的方式

$(document).on('change', 'select#company', function(e) {
    e.preventDefault();
    var div = $('td#result', this);
    var id = $(this).val();
    var url = "index.php?route=catalog/product/getCat&user_token={{ user_token }}&filter_group_id=" + id;
    $.ajax({
      type: "GET",
      url: url,
      success: function(data) {
        $(data).appendTo(div);
      }
    });
});

Answer 1

要实现此目的，您可以在元素上使用通用类，并使用DOM遍历来查找与引发select事件的change相关的内容。这样做还有一个好处，就是避免了id所造成的冲突，因为id在DOM中必须唯一。

首先将所有id属性修改为类：

function addFilterRow() {
  html = '<tr class="filter-row">';
  html += '  <td class="text-left">';
  html += '    <select name="company[]" class="company form-control">';
  html += '      {% for company in damask_company %}';
  html += '        <option name="{{ company.filter_group_id }}" value="{{ company.filter_group_id }}">{{ company.name }}</option>';
  html += '      {% endfor %}';
  html += '    </select>';
  html += '  </td>';
  html += '  <td class="text-left result"></td>';
  html += '</tr>';
  $('tbody').append(html);
}

现在，您可以修改事件处理程序以检索同级td：

$(document).on('change', 'select.company', function(e) {
    e.preventDefault();
    var $result = $(this).closest('tr').find('td.result');

    $.ajax({
      type: "GET",
      url: "index.php?route=catalog/product/getCat&user_token={{ user_token }}&filter_group_id=" + $(this).val(),
      success: function(data) {
        $result.append(data);
      }
    });
});

Answer 2

您必须先重置旧的id =“ result”，然后再附加新的id =“ result”

$.ajax({
      type: "GET",
      url: url,
      success: function(data) {
        $("#result").attr("id", ""); 
        $(data).appendTo(div);
      }
    });

这会将属性ID结果删除为“”为空，然后您新的结果ID将开始工作。否则，它将始终选择结果的第一个ID。

定位每个添加项的当前动态元素

2 个答案: