Attach click-event to element in .select2-result

Question

I\'m looking for a way to attach a click-event to a select2-result-item. I\'ve gone ahead and formatted both result and selection via

function format(state)          


        

Answer 1

I think Select2's handling of the mouseup event prevents the .info element from getting a click event. Having the .info element capture the mouseup event and prevent it from propagating seems to fix that.

function format(state, container) {
    if (!state.id) return state.text; // optgroup
    container.append(state.text);
    $('link')
        .appendTo(container)
        .mouseup(function(e) {
            e.stopPropagation();            
        })
        .click(function(e) {
            e.preventDefault();
            alert('CLICK');
        });
}

This can also be done to support a link in the selected item, but there it is the mousedown event that needs to be captured.

jsfiddle