ajax设置中的引导程序选择工具提示只显示一次

Question

我已经实现了添加&显示使用此源的引导程序选择选项的引导程序工具提示。如何使用引导程序选择在每个选择选项上添加工具提示

静态设置所有工作良好

问题出在ajax设置上。我可以在第一次下拉选择时获得工具提示。当我第二次尝试为相同的选择下拉列表进行选择时，它不会显示工具提示和与下一个选择下拉列表相同的行为

例如imudetails选择并继续。

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

我将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>

选择更改功能

//------------------------------------------------------------------------------------------
$("#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!');
}
});

}

//引导选择工具提示启用

$('.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/