文章/答案/技术大牛

发布

问在JQuery中更新<div>
EN

Stack Overflow用户

提问于 2015-07-13 15:43:30

回答 2查看 118关注 0票数 0

我有以下HTML：

    <div id="something" class="col-md-2 hideOverflow">
        @Html.Label(@Address.label_AddressType)
    </div>

使用以下脚本：

    function pageLoad() {
        $('[data-toggle="popoverHover"]').popover({ trigger: 'hover', placement: 'top' });
        $('[data-toggle="popoverClick"]').popover({ trigger: 'click', placement: 'top' });

        $('.something').attr('data-toggle', 'popoverHover');
        $('.something').attr('data-content', 'Testing 123');
    }

请有人帮助我让文本“测试123”出现在标签的悬停上。

提前谢谢你。

html

javascript

jquery

回答 2

Stack Overflow用户

发布于 2015-07-13 15:49:46

您可以使用构造函数创建弹出窗口，如下所示

function pageLoad() {
  $('[data-toggle="popoverHover"]').popover({
    trigger: 'hover',
    placement: 'top'
  });
  $('[data-toggle="popoverClick"]').popover({
    trigger: 'click',
    placement: 'top'
  });
  $('.something').popover({
    trigger: 'hover',
    placement: 'top',
    content: 'Testing 123'
  });

}

pageLoad();

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<br />
<br />
<div data-toggle="popoverHover" data-content="on hover">data-toggle="popoverHover"</div>
<div data-toggle="popoverClick" data-content="on click">data-toggle="popoverClick"</div>
<label class="something">something</label>

票数 0

Stack Overflow用户

发布于 2015-07-13 16:13:00

您的脚本不起作用，因为您使用的是类选择器而不是id选择器。此外，popover不会出现，因为在调用jQuery.fn.popover时，您是在元素上初始化它的，而元素目前还不存在于DOM中。因此，您必须在初始化脚本之前添加data-toggle="popoverHover"。

您可以通过重新排序代码并更改选择器来轻松解决此问题：

function pageLoad() {

  // Add the attributes by calling .attr() once.
  $('#something').attr({
    'data-toggle': 'popoverHover',
    'data-content': 'Testing 123'
  });

  $('[data-toggle="popoverHover"]').popover({
    trigger: 'hover',
    placement: 'top'
  });
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31377875

复制

相似问题

问在JQuery中更新<div>
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JQuery中更新<div>EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JQuery中更新<div>
EN