Select2 v4 clone don't pass the data

问题

I am attempting to do an AJAX call with the Select2 ver4 jquery plugin and Using Loading remote data of Select2 sample page. I am trying to clone a select which contains select2 tool. Before Question Clone select have already worked by good Adviser!!Thank you!!

But clone element don't work use new AJAX(test.php).

HTML CODE

<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 CODE

echo $_GET["da"];

回答1:

What you're actually asking here is to get the .hint that belongs to the target of the click event's row.

To do this, first define the function we'll use for the $.get success as a global variable:

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

Then you can use it to define the .on("change") events like this (note that it appears on two places in your code):

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

来源：https://stackoverflow.com/questions/32442348/select2-v4-clone-dont-pass-the-data