select2标签中的单击事件(带有链接) [英] Click event in select2 tag with a link

问题描述

我在标记模式下使用select2.我的商品文字是一个链接，例如:

I am using select2 in tag mode. My item text is a link, e.g.:

<a href='url'>tag1</a>.

select2似乎吞下了标签上的click事件(选定的选择)，因此我无法导航到链接.

select2 seems to be swallowing the click event on the tag (selected choice) so I cannot navigate to the link.

关于如何使链接正常工作的任何想法?

Any ideas on how to get the link to work?

推荐答案

Select2默认情况下会禁用单击事件，目前，您必须使用一种变通方法来获得所需的结果.由于下面的资源，这是我如何完成此操作的示例.如果您不使用返回值.data('select2')来重新实例化该变量，则此方法将不起作用

Select2 disables click events by default and for the moment, you must use a workaround to achieve the desired results. Here's an example of how I accomplished this, thanks to the resources below. This won't work if you don't re-instantiate the variable with the return value of .data('select2')

首先，在您的链接中添加一个类:

First, add a class to your links:

<a href="#" class="detail-link">hello</a>

然后，您必须收听Select2的onSelect事件

Then you have to listen to the onSelect event of Select2

    var search = $("#searchBox");
    search.select2({
        placeholder: "Search...",
        allowClear: true,
        minimumInputLength: 3,
        maximumSelectionSize: 1,
        escapeMarkup: function(m) { return m; },
        ajax: {     blah blah blah       },
        formatResult: window.App.formatFunction
    });


    search= search.data('select2');

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

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

            if (target && target.hasClass('detail-link')) {
                window.location = target.attr('href');
            } else {
                return fn.apply(this, arguments);
            }
        }
    })(search.onSelect);

这个问题/答案/JFiddle帮助了我，但注意.data('select2')行

This question/answer/JFiddle helped me out but its important to note the .data('select2') line

忘记了资源- https://stackoverflow.com/a/15637696

这篇关于select2标签中的单击事件(带有链接)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！