Target current dynamic element of each add

问题: How to target the current id-result element for each row added ? here is now i add the new row function addFilterRow() { html = '<tr id="filter-row">'; html...

问题:

How to target the current id-result element for each row added ?

here is now i add the new row

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);
}

here is how i try to append it

$(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);
      }
    });
});

回答1:

To achieve this you can use common classes on the elements and DOM traversal to find the content related to the select which raised the change event. This has the added benefit of avoid the id conflict you're creating, as id have to be unique within the DOM.

Firstly amend all the id attributes to classes:

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);
}

Now you can amend your event handler to retrieve the sibling 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);
      }
    });
});

回答2:

You have to reset the old id="result" before appending the new id="result" by doing this

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

This will remove the attribute ID result to "" empty and then your new id of result will start working. Otherwise it will select the first id of result always.

  • 发表于 2019-01-18 05:12
  • 阅读 ( 156 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除