如何解决ajax 设置中的 bootstrap-select 工具提示只显示一次
我已经使用此源在引导程序选择选项上添加和显示引导程序工具提示。 How to add tooltip on each select option with bootstrap-select
在静态设置上一切正常
问题出在ajax设置上。我能够在第一个下拉选择时获得工具提示。 当我第二次尝试选择相同的选择下拉列表时，它不会显示工具提示，并且与下一个选择下拉列表的行为相同
例如。 'imudetails' 选择并继续。
我有 5 个选择下拉选择，使用下面给出的更改方法一个接一个激活，我已经厌倦了添加 $('.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>
选择更改功能
//------------------------------------------------------------------------------------------
$("#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,control);
if (RecordCount > 0) {
$("#budetails").val("0");
$('#budetails').attr('disabled',false);
$("#sbudetails").val("0");
$('#sbudetails').attr('disabled',true);
$('.selectpickerdrop').selectpicker('refresh');
}
}
else {
$("#budetails").val("0");
$('#budetails').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,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);
$('.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,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');
}
});
function GetHierarchyDetails(portfolioTypeId,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 选择工具提示启用
$('.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)
});
});
});
解决方法
由于下拉列表是通过 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
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
