Клон Select2 v4 не передает данные

Question

Я пытаюсь выполнить AJAX-вызов с помощью jQuery-плагина Select2 ver4 и Использовать загрузку удаленных данных образца страницы Select2. Я пытаюсь клонировать выбор, который содержит инструмент select2. До того, как вопрос Clone Select уже работал хорошим консультантом! Спасибо!

Но элемент-клон не работает, используйте новый 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 CODE

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