HTML Twitter Bootstrap 工具提示重新初始化(动态工具提示标题)
HTML Twitter Bootstrap tooltip reinitialization (dynamic tooltip title)
我是 Bootstrap 和 jquery 的新手,我遇到了一个大问题,但没有找到答案。
案例:
我有一个文本,它也有工具提示和弹出框。在弹出窗口中,我显示了一个输入字段和一个按钮。按下按钮后,"tooltip-title" 变为输入值。这行得通。但是...我无法销毁并重新初始化工具提示,因此它不会显示新标题。
代码:
$('.note').each(
function() {
$(this).popover({
placement: 'auto',
html: true,
content: returnNoteInput($(this), $(this).attr("tooltip-title"), $(this).attr("input")),
title: "Jegyzet módosítása"
})
$(this).tooltip({
placement: 'bottom',
title: $(this).attr("tooltip-title")
})
});
function returnNoteInput(inputValue, inputTarget) {
eredmeny = "<input type=\"text\" value=\"" + inputValue + "\"></input>";
eredmeny += "<button onclick=\"setValue(this, '" + inputTarget + "')\")>módosítás</button>"
return eredmeny;
}
function setValue(ele, targetId) {
document.getElementById(targetId).value = ele.previousElementSibling.value;
noteElement = document.getElementById(targetId).nextElementSibling;
noteElement.setAttribute("tooltip-title", ele.previousElementSibling.value);
}
所以一切正常(我可以看到 tooltip-title 发生变化)除了我无法重新初始化工具提示(我没有复制我的尝试,因为它没有成功)。
编辑:注意:我还有一个输入框,只是想看看它是否有效。
感谢您的帮助!
我找到了解决方案:
function setValue(ele, targetId){
document.getElementById(targetId).value=ele.previousElementSibling.value;
noteElement= $('#'+targetId).next();
noteElement.attr("tooltip-title",ele.previousElementSibling.value);
noteElement.tooltip("destroy");
noteElement.popover("destroy");
setTimeout(function() {
noteElement.tooltip({placement : 'bottom',title : noteElement.attr("tooltip-title")})
noteElement.popover({placement : 'auto',html:true,content: returnNoteInput(noteElement.attr("tooltip-title"),noteElement.attr("input")), title :"Jegyzet módosítása"})
}
,1000)
}
我是 Bootstrap 和 jquery 的新手,我遇到了一个大问题,但没有找到答案。
案例: 我有一个文本,它也有工具提示和弹出框。在弹出窗口中,我显示了一个输入字段和一个按钮。按下按钮后,"tooltip-title" 变为输入值。这行得通。但是...我无法销毁并重新初始化工具提示,因此它不会显示新标题。
代码:
$('.note').each(
function() {
$(this).popover({
placement: 'auto',
html: true,
content: returnNoteInput($(this), $(this).attr("tooltip-title"), $(this).attr("input")),
title: "Jegyzet módosítása"
})
$(this).tooltip({
placement: 'bottom',
title: $(this).attr("tooltip-title")
})
});
function returnNoteInput(inputValue, inputTarget) {
eredmeny = "<input type=\"text\" value=\"" + inputValue + "\"></input>";
eredmeny += "<button onclick=\"setValue(this, '" + inputTarget + "')\")>módosítás</button>"
return eredmeny;
}
function setValue(ele, targetId) {
document.getElementById(targetId).value = ele.previousElementSibling.value;
noteElement = document.getElementById(targetId).nextElementSibling;
noteElement.setAttribute("tooltip-title", ele.previousElementSibling.value);
}
所以一切正常(我可以看到 tooltip-title 发生变化)除了我无法重新初始化工具提示(我没有复制我的尝试,因为它没有成功)。
编辑:注意:我还有一个输入框,只是想看看它是否有效。
感谢您的帮助!
我找到了解决方案:
function setValue(ele, targetId){
document.getElementById(targetId).value=ele.previousElementSibling.value;
noteElement= $('#'+targetId).next();
noteElement.attr("tooltip-title",ele.previousElementSibling.value);
noteElement.tooltip("destroy");
noteElement.popover("destroy");
setTimeout(function() {
noteElement.tooltip({placement : 'bottom',title : noteElement.attr("tooltip-title")})
noteElement.popover({placement : 'auto',html:true,content: returnNoteInput(noteElement.attr("tooltip-title"),noteElement.attr("input")), title :"Jegyzet módosítása"})
}
,1000)
}