How do I fire a new ajax on select2 new /remove tag event?

Question

I use the following snippet to add a new select2 tag remotely with ajax and I want to register or remove some records of my many to many table on new tag / remove tag event<

Answer 1

Not tested but should work :

$('.e6').on("change", function(e){
    if (e.removed) {
        $.ajax({
            type: "POST",
            url: '/admin/?controller=vouchers&action=updateRelatedProducts',
            data: {id: e.removed.id, action: remove},    //Or you can e.removed.text
            error: function () {
                alert("error");
            }
        });
    }
    if (e.added) {
        $.ajax({
            type: "POST",
            url: '/admin/?controller=vouchers&action=updateRelatedProducts',
            data: {id: e.added.id, action: add},    //Or you can e.added.text
            error: function () {
                alert("error");
            }
        });
    }

    //OR you can play with val data instead
    if (e.val) {
        $.ajax({
            type: "POST",
            url: '/admin/?controller=vouchers&action=updateRelatedProducts',
            data: {val: JSON.stringify(e.val)},    //Will send all the selected values
            error: function () {
                alert("error");
            }
        });
    }
}

Answer 2

Is there a fiddle where you can post a version of this problem.

Based on what I understood, would the following pattern suffice?

  function dynamicSelect2(id) {
      $.ajax({
          url: 'data-url',
          data: 'parameters',
          dataType: 'json'
      }).done(function () {
          //Create the Select2 with necessary data on the element "id" passed.
      }).always(function () {
          //Attach other events..
      });
  }

It is possible to create the entire select2 box dynamically and attach events on it this way. If you do that within a closure, you'll have access to variables that you defined prior to your ajax calls.