javascript - How to place a button into a select2 result item and handle its click? - Stack Overflow

admin管理员组

文章数量:1357595

I'm trying to place a button into select2 result items (for allowing the user to remove items). I managed to place the buttons, but I didn't manage to handle their click event yet. Somehow the event doesn't get raised. I think it's something like select2 is closing the dropdown before my button's click event would raise, but cannot figure out how I could make it work.

Here is the snippet what I have now.

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

Here is a demo fiddle. I've also tried the mousedown event without success.

I'm trying to place a button into select2 result items (for allowing the user to remove items). I managed to place the buttons, but I didn't manage to handle their click event yet. Somehow the event doesn't get raised. I think it's something like select2 is closing the dropdown before my button's click event would raise, but cannot figure out how I could make it work.

Here is the snippet what I have now.

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

Here is a demo fiddle. I've also tried the mousedown event without success.

• javascript
• jquery
• jquery-select2

Share Improve this question Follow asked Sep 15, 2014 at 12:29 Zoltán TamásiZoltán Tamási 12.8k88 gold badges7070 silver badges9898 bronze badges 8

• An aside, but in your click handler, return false is equivalent to e.preventDefault(); e.stopPropagation(). – joews Commented Sep 15, 2014 at 12:44
• Yes I know that, I was just so confused that I wanted to be sure I try everything :) – Zoltán Tamási Commented Sep 15, 2014 at 13:00
• But actually when I debugged into the code I realized that the handler doesn't even get called, so it's not realted to how I prevent or not prevent it from bubbling. – Zoltán Tamási Commented Sep 15, 2014 at 13:03
• I would guess it is because the element seizes to exist after selection. I looked at the html while open (the 2 buttons are there) and after selection and the 2 buttons disappear! – hahaha Commented Sep 15, 2014 at 13:10
• 2 You should have a look to this answer : stackoverflow./a/15637696/1127669. select2 prevents any click event on the popover list. But you can redefine the onSelect event like this : jsfiddle/qouo8uog/33. – Samuel Caillerie Commented Sep 15, 2014 at 13:18

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 4

You should have a look to this answer : stackoverflow./a/15637696/1127669 : the select2 library prevents any click event on the popover list.

But you can redefine the onSelect event like this : jsfiddle/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);

At the end of the day I decided to patch the select2 source code instead of hacking the options. Probably it would be worth a pull request on the github project, but currently I have no time to prepare it.

In both of the onSelect implementations (single and multi) I've placed this code in the front.

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

Just add

closeOnSelect: false

The button will works.

本文标签： javascriptHow to place a button into a select2 result item and handle its clickStack Overflow