Come posizionare un pulsante in una voce di risultato select2 e gestirne il clic?

Question

Sto provando a inserire un pulsante in elementi di risultato select2 (per consentire all'utente di rimuovere elementi). Sono riuscito a posizionare i pulsanti, ma non sono ancora riuscito a gestire il loro evento click. In qualche modo l'evento non viene sollevato. Penso che qualcosa di simile a select2 stia chiudendo il menu a discesa prima che l'evento click del mio pulsante aumenti, ma non riesco a capire come potrei farlo funzionare.

Ecco il frammento di ciò che ho ora.

...  
formatResult: function (item) { 
    return item.text + "<button class='btn btn-xs btn-default pull-right select2-result-button' data-id='" + item.id + "'>&times;</button>"; 
} 
... 
$(document).on("click", ".select2-result-button", function (e) { 
    alert("clicked: " + $(this).data("id")); 
    e.preventDefault(); 
    e.stopPropagation(); 
    return false; 
}); 

Ecco una demo fiddle. Ho anche provato l'evento Mousedown senza successo.

Answer 1

Si dovrebbe dare un'occhiata a questa risposta: stackoverflow.com/a/15637696/1127669: la libreria select2 impedisce qualsiasi evento di clic nell'elenco dei popup.

Tuttavia, è possibile ridefinire l'evento onSelect in questo modo: jsfiddle.net/qouo8uog/33.

s2list.onSelect = (function (fn) { 
    return function (data, options) { 
     var target; 

     if (options != null) { 
      target = $(options.target); 
     } 

     // In case where the target is your own button, handle it 
     if (target && target.hasClass('select2-result-button')) { 
      alert("clicked: " + $(target).data("id")); 
     } else { 
      return fn.apply(this, arguments); 
     } 
    } 
})(s2list.onSelect); 

Answer 2

Alla fine della giornata ho deciso di patchare il codice sorgente select2 invece di hackerare le opzioni. Probabilmente varrebbe la pena di una richiesta di pull sul progetto github, ma al momento non ho tempo per prepararlo.

In entrambe le implementazioni onSelect (singola e multipla) ho inserito questo codice nella parte anteriore.

onSelect: function (data, options) { 

     // @@ implement a way to be able to place buttons in results 
     // this will check if there is an event target (in case when selection is invoked by mouse/touch), and if the target is a result button, trigger the result button event on the element, and skip default selecting behaviour 
     if (options && options.target && $(options.target).hasClass('select2-result-button')) { 
     var evt = $.Event("select2-result-button-click", { choice: data, button: options.target }); 
     this.opts.element.trigger(evt); 
     return; 
     } 
     ... 
}