在Bootstrap弹出窗口中执行JS [英] Execute JS inside of a Bootstrap popover

问题描述

我试图在引导程序中放置一个表单，所有的html呈现都很好，但不会执行任何JavaScript（日期选择器）。

这是html代码：

 < button type =buttonclass =btn btn-lg btn-危险data-html ='true'data-toggle =popovertitle =Popover标题data-content ='
 
 Html表单代码
 
'>点击切换弹出式广告< /按钮> 
  

JS：

 < code $（'[data-toggle ='popover']'）。popover（）
  

解决方案

我推荐在属性中使用选择器

$ b $ p ：

 < button type =buttonclass =btn btn -lg btn-dangerdata-popover-content =＃mypopdata-toggle =popoverdata-trigger =焦点>弹出式广告示例< / button> 
 
< div class =hiddenid =mypop> 
< div class =popover-heading> 
这是标题
< / div> 
< div class =popover-body> 
这是body 
< / div> 
< / div> 
  

js：

 < code $（[data-toggle = popover]）。popover（{
 html：true，
 content：function（）{
 var content = $（this） .attr（data-popover-content）; 
 setTimeout（function（）{console.log（'execute'）;}，500）; 
 return $（content）.children（。 （）; 
}，
 title：function（）{
 var title = $（this）.attr（data-popover-content）; 
 return $（title）.children（。popover-heading）。html（）; 
} 
}）; 
  

link demo： https://jsfiddle.net/xz45cnt4/

使用 class hidden in id mypop

I am trying to place form inside of a bootstrap, all the html render into it just fine, but doesn't execute any of the JavaScript (date-picker).

This is the html code:

<button type="button" class="btn btn-lg btn-danger" data-html='true' data-toggle="popover" title="Popover title" data-content='

Html Form code

'>Click to toggle popover</button>

JS:

  $('[data-toggle="popover"]').popover()

解决方案

I recommend using selector in attributes

html:

<button type="button" class="btn btn-lg btn-danger" data-popover-content="#mypop" data-toggle="popover" data-trigger="focus">Popover Example</button>

<div class="hidden" id="mypop">
  <div class="popover-heading">
    This is the heading
  </div>
  <div class="popover-body">
    This is the body
  </div>
</div>

js:

$("[data-toggle=popover]").popover({
   html : true,
   content: function() {
      var content = $(this).attr("data-popover-content");
      setTimeout(function(){ console.log('execute'); },500);
      return $(content).children(".popover-body").html();
   },
   title: function() {
      var title = $(this).attr("data-popover-content");
      return $(title).children(".popover-heading").html();
   }
});

link demo: https://jsfiddle.net/xz45cnt4/

use class hidden in id mypop

这篇关于在Bootstrap弹出窗口中执行JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！