Select2 v4 克隆不传递数据

Question

我正在尝试使用 Select2 ver4 jquery 插件和使用 Select2 示例页面的加载远程数据进行 AJAX 调用。 我正在尝试克隆一个包含 select2 工具的选择。 Before Question 克隆选择已经由好的顾问工作了！！谢谢！！

但是使用新的 AJAX(test.php) 克隆元素不起作用。

HTML 代码

<tr>
<td>
<select class="js-example-data-ajax" id="sel1">
</select>
</td>
<td>
<div class="hint">Get befor select value.</div>
</td>
<td>
<button type="button" class="addline">Add Line</button>
</td>
</tr>

jQuery 代码

$.fn.select2.amd.require(
    ["select2/core", "select2/utils", "select2/compat/matcher"],
    function (Select2, Utils, oldMatcher) {
        var $ajax = $(".js-example-data-ajax");
        $ajax.select2({
        ajax: {
            url: "https://api.github.com/search/repositories",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term // search term
                };
            },
            processResults: function (data, params) {
            params.page = params.page || 1;
            return {
                results: data
            };
        },
            cache: true
    },
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 1,
  });
});

$(document).on('click', '.addline', function () {
    var $tr = $(this).closest('tr');
    var $lastTr = $tr.closest('table').find('tr:last');

    $lastTr.find('.js-example-data-ajax').select2('destroy');

    var $clone = $lastTr.clone(true);

    $clone.find('td').each(function() {
        var el = $(this).find(':first-child');
        var id = el.attr('id') || null;
        if (id) {
            var i = id.substr(id.length - 1);
            var prefix = id.substr(0, (id.length - 1));
            el.attr('id', prefix + (+i + 1));
            el.attr('name', prefix + (+i + 1));
        }
    });
    $tr.closest('tbody').append($clone);

    $(".js-example-data-ajax").select2({
      ajax: {
        url: "https://api.github.com/search/repositories",
        dataType: 'json',
        delay: 250,
        data: function (params) {
          return {
            q: params.term // search term
          };
        },
        processResults: function (data, params) {
          params.page = params.page || 1;

          return {
            results: data
          };
        },
        cache: true
      },
      escapeMarkup: function (markup) { return markup; },
      minimumInputLength: 1,
    });
// Don't work code from here
    $('.js-example-data-ajax').on("change",function() {
        $.get ('test.php',
            {da : $(this).val()},
            function (data) {
                $('.hint').html(data);
        });
    });
});
// Don't work code from here
$(document).ready(function(){
    $('.js-example-data-ajax').on("change",function() {
        $.get ('test.php',
            {da : $(this).val()},
            function (data) {
            $('.hint').html(data);
        });
    });
});

test.php 代码

echo $_GET["da"];

Answer 1

您在这里实际要求的是获取属于点击事件行目标的.hint。

为此，首先将我们将用于$.get 成功的函数定义为全局变量：

var onSelectGetSuccess = function(element) {
  return function (data) {
   // fill in the .hint of the closest tr of our element
    $(element).closest('tr').find('.hint').html(data);
  }
}

然后您可以使用它来定义像这样的.on("change") 事件（注意它出现在您的代码中的两个位置）：

$('.js-example-data-ajax').on("change",function(e) {
    $.get ('test.php',
        {da : $(this).val()},
        onSelectGetSuccess(e.target))
});