【问题标题】:HTML Twitter Bootstrap tooltip reinitialization (dynamic tooltip title)HTML Twitter Bootstrap 工具提示重新初始化(动态工具提示标题)
【发布时间】:2018-07-30 15:45:24
【问题描述】:

我是 Bootstrap 和 jquery 的新手,我遇到了一个大问题,没有找到答案。

案例: 我有一个文本,其中也有工具提示和弹出框。通过弹出框,我显示了一个输入字段和一个按钮。按下按钮后,“工具提示标题”变为输入值。这行得通。但是...我无法销毁并重新初始化工具提示,因此它不会显示新标题。

代码:

$('.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);
}

所以一切正常(我可以看到工具提示标题发生变化),除了我无法重新初始化工具提示(我没有复制我的尝试,因为它没有成功)。

编辑:注意:我还有一个输入字段,只是为了看看它是否有效。

感谢您的每一个帮助!

【问题讨论】:

    标签: javascript twitter-bootstrap twitter-bootstrap-tooltip


    【解决方案1】:

    我找到了解决办法:

    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)
        }
    

    【讨论】:

      猜你喜欢
      • 2015-03-05
      • 2012-05-13
      • 1970-01-01
      • 2019-03-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-07-01
      相关资源
      最近更新 更多