javascript – 如何将按钮放入select2结果项并处理其单击?

前端之家收集整理的这篇文章主要介绍了javascript – 如何将按钮放入select2结果项并处理其单击?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试将一个按钮放入select2结果项(允许用户删除项目).我设法放置按钮,但我还没有设法处理他们的点击事件.不知何故,事件不会被提升.我认为这就像select2在我的按钮的点击事件会提高之前关闭下拉列表,但是无法弄清楚我是如何让它工作的.

这是我现在拥有的片段.

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

这是一个演示fiddle.我也尝试了mousedown事件没有成功.

解决方法

你应该看看这个答案: stackoverflow.com/a/15637696/1127669:select2库阻止弹出列表上的任何点击事件.

但您可以重新定义onSelect事件,如下所示: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);
原文链接:https://www.f2er.com/js/158030.html

猜你在找的JavaScript相关文章