I need to add a Button to every select2 item and prevent the default event so only the button gets triggered.

I have the following code but the normal onSelect event still gets triggered:

select.on('select2:select', test2);

function test2(e) {
    if (e.params.originalEvent.target.classList.contains('TreeButton')) {
        //stop event execution
        e.stopPropagation();
        e.preventDefault();
        return false;
    } else {
        //execute normal
    }
}

I need to add a Button to every select2 item and prevent the default event so only the button gets triggered.

I have the following code but the normal onSelect event still gets triggered:

select.on('select2:select', test2);

function test2(e) {
    if (e.params.originalEvent.target.classList.contains('TreeButton')) {
        //stop event execution
        e.stopPropagation();
        e.preventDefault();
        return false;
    } else {
        //execute normal
    }
}

• javascript
• events
• select
• jquery-select2

1 Answer 1

Try to catch select2:selecting event:

select.on("select2:selecting", function (e) { 
    if (e.params.args.originalEvent.target.className === 'btn') {
      e.preventDefault();
    }
}

Here is a jsfiddle: http://jsfiddle/beaver71/dtjhpnm7/