bootstrap-select ajax 设置中的工具提示仅显示一次

Question

我使用此来源实现了在 bootstrap select 选项上添加和显示 bootstrap 工具提示。

静态设置一切正常

问题出在 ajax 设置上。我能够在第一个下拉列表中获得工具提示 select。当我第二次尝试 select 相同的 select 下拉菜单时，它不显示工具提示和与下一个 select 下拉菜单相同的行为

例如。 'imudetails' select 及以后。

我有 5 个 select 下拉菜单 select 使用下面给出的更改方法一个接一个地激活，我厌倦了添加 $('.selectpickerdrop').selectpicker('refresh');
在 ajax 成功函数的底部，但行为仍然相同。只能用一次。

我正在使用 Bootstrap-select v-1.13.18 与 bootstrap tooltip, bootstrap version - 4.x 和 popper.js-1.16.1 jquery 3.x 和 jquery-ui 1.12.1。如果需要其他信息，准备连接。

html

<select class="selectpickerdrop form-control" data-show-subtext="true" data-live-search="true" data-size="5" id="marketdetails" name="marketdetails"></select>

select 关于改变函数

   //------------------------------------------------------------------------------------------
$("#marketdetails").on('change', function () {
    parentAttributeValue = $(this).find('option:selected').attr('value');
    if (parentAttributeValue != 0) {
        portfolioTypeId = 'NT_ID_007';
        control = $('#mudetails');
        control.html('');
        GetHierarchyDetails(portfolioTypeId, parentAttributeValue, control);
        if (RecordCount > 0) {
            $("#mudetails").val("0");
            $('#mudetails').attr('disabled', false);
            $("#budetails").val("0");
            $('#budetails').attr('disabled', true);
            $("#sbudetails").val("0");
            $('#sbudetails').attr('disabled', true);
            $("#sbu2details").val("0");
            $('#sbu2details').attr('disabled', true);
            $('.selectpickerdrop').selectpicker('refresh');
        }
    }
    else {
        $("#mudetails").val("0");
        $('#mudetails').attr('disabled', true);
        $("#budetails").val("0");
        $('#budetails').attr('disabled', true);
        $("#sbudetails").val("0");
        $('#sbudetails').attr('disabled', true);
        $("#sbu2details").val("0");
        $('#sbu2details').attr('disabled', true);
        $('.selectpickerdrop').selectpicker('refresh');
    }
    $('.selectpickerdrop').selectpicker('refresh');
});


$("#mudetails").on('change', function () {
    parentAttributeValue = $(this).find('option:selected').attr('value');
    if (parentAttributeValue != 0) {
        portfolioTypeId = 'NT_ID_001';
        control = $('#budetails');
        control.html('');
        GetHierarchyDetails(portfolioTypeId, parentAttributeValue, control);
        if (RecordCount > 0) {
            $("#budetails").val("0");
            $('#budetails').attr('disabled', false);
            $("#sbudetails").val("0");
            $('#sbudetails').attr('disabled', true);
            $("#sbu2details").val("0");
            $('#sbu2details').attr('disabled', true);
            $('.selectpickerdrop').selectpicker('refresh');
        }
    }
    else {
        $("#budetails").val("0");
        $('#budetails').attr('disabled', true);
        $("#sbudetails").val("0");
        $('#sbudetails').attr('disabled', true);
        $("#sbu2details").val("0");
        $('#sbu2details').attr('disabled', true);
        $('.selectpickerdrop').selectpicker('refresh');
    }
});

$("#budetails").on('change', function () {
    parentAttributeValue = $(this).find('option:selected').attr('value');
    if (parentAttributeValue != 0) {

        portfolioTypeId = 'NT_ID_004';
        control = $('#sbudetails');
        control.html('');
        GetHierarchyDetails(portfolioTypeId, parentAttributeValue, control);
        if (RecordCount > 0) {
            $("#sbudetails").val("0");
            $('#sbudetails').attr('disabled', false);
            $("#sbu2details").val("0");
            $('#sbu2details').attr('disabled', true);
            $('.selectpickerdrop').selectpicker('refresh');
        }
    }
    else {
        $("#sbudetails").val("0");
        $('#sbudetails').attr('disabled', true);
        $("#sbu2details").val("0");
        $('#sbu2details').attr('disabled', true);
        $('.selectpickerdrop').selectpicker('refresh');
    }
});

$("#sbudetails").on('change', function () {
    parentAttributeValue = $(this).find('option:selected').attr('value');
    if (parentAttributeValue != 0) {

        portfolioTypeId = 'NT_ID_017';
        control = $('#sbu2details');
        control.html('');
        GetHierarchyDetails(portfolioTypeId, parentAttributeValue, control);
        if (RecordCount > 0) {
            $("#sbu2details").val("0");
            $('#sbu2details').attr('disabled', false);
            $('.selectpickerdrop').selectpicker('refresh');
        }
    }
    else {
        $("#sbu2details").val("0");
        $('#sbu2details').attr('disabled', true);
        $('.selectpickerdrop').selectpicker('refresh');
    }
});

// ajax调用函数

function GetHierarchyDetails(portfolioTypeId, parentAttributeValue, control) {
//$('.tooltip-inner').remove();
//$('.tooltip-arrow').remove();
RecordCount = 0;
$.ajax({
    type: "POST",
    dataType: "json",
    url: "../../UserInterfaceV2/AL/Transaction.asmx/GetHierarchyDetails",
    data: JSON.stringify({ portfolioTypeId: portfolioTypeId, parentAttributeValue: parentAttributeValue }),
    async: false,
    contentType: 'application/json; charset=utf-8',
    success: function (data) {
        //GetToolTip();            
        data = $.parseJSON(data.d);
        if (data.length > 0) {
            control.empty();
            control.append($("<option></option>").val("0").html("Select"));
            for (var index = 0; index < data.length; index++) {
                {
                    if (data[index].PortfolioId && data[index].PortfolioId != '' && data[index].PortfolioName && data[index].PortfolioName != ''
                        && data[index].PortfolioName != null && data[index].PortfolioId != null)
                    {
                        control.append($('<option title="' + data[index].PortfolioName + ' [' + data[index].PortfolioId + ']'
                            + '">'+'</option>').val(data[index].PortfolioId).html(data[index].PortfolioName
                            + ' [' + data[index].PortfolioId + ']'));
                        RecordCount++;
                    }
                }
            }
            
        };
        $('.selectpickerdrop').selectpicker('refresh');  
    },
    error: function (data) {
        alert('Oops! Something went wrong, could you please try again!');
    }
});

}

// Bootstrap select 工具提示启用

$('.selectpickerdrop').selectpicker({
    liveSearch: true
}).on('loaded.bs.select', function (e) {
    var $el = $(this);
    var $lis = $el.data('selectpicker').selectpicker.main.elements;

    $($lis).each(function (i) {

        var tooltip_title = $el.find('option').eq(i).attr('title');

        $(this).tooltip({
            'title': tooltip_title || '',
            'placement': 'top',
            //'selector': '.selectpicker',
            container: $(this)
        });

    });

});

Answer 1

由于下拉列表是通过 ajax 填充的，因此使用 loaded.bs.select 事件将不起作用，因为触发此事件时，ajax 请求未完成（或未完成尚未开始）。

如果您已经在使用 .selectpicker('refresh')，我们可以利用 refreshed.bs.select 事件并在该事件的回调中附加工具提示：

$('.selectpickerdrop').selectpicker({
    liveSearch: true
}).on('loaded.bs.select', function (e) {
  // append static tooltips
})
.on('refreshed.bs.select', function(e) {
  // append dynamic tooltips
});

Fiddle: https://jsfiddle.net/wskm4edz/

bootstrap-select ajax 设置中的工具提示仅显示一次

bootstrap-select tooltip in ajax setup shows only once

jquery

ajax

twitter-bootstrap

twitter-bootstrap-tooltip