运行加载弹出文本输入时的 js

Question

想要 cleave.js 即时格式化文本输入。

我有 2 个文本输入

HTML 文本输入和
每当单击搜索图标时，文本输入也会弹出。

问题出在弹出窗口文本输入上，其中没有切割文本格式在职的。

我相信这可能与元素不存在有关？我试着听取听众的意见，但到目前为止还没有运气。 .on('shown.bs.popover)

我的代码如下 https://jsfiddle.net/fairul82/y3kf92oq/ 使用的库：cleave,js, bootstrap popover, jquery

 HTML
<div class="container">
 <h3>Bootstrap 3 Popover HTML Example</h3>
 <input type="text" class="input-element"><br>
 <ul class="list-unstyled">
 <li><a data-placement="bottom" data-toggle="popover" data- 
container="body" data-placement="left" type="button" data-html="true" 
href="#" id="login"><span class="glyphicon glyphicon-search" style="margin:3px 0 0 0"></span></a></li>
<div id="popover-content" class="hide">
  <form class="form-inline" role="form">
    <div class="form-group">
      <h1>
        My Content
      </h1>
      <input type="text" class="input-element"><br>
    </div>
  </form>
</div>

//JS
$("[data-toggle=popover]").popover({
 html: true,
 content: function() {
 return $('#popover-content').html();
 }
 });

 $("[data-toggle=popover]").on('shown.bs.popover', function() {
 // alert('called back');
 const cleave = new Cleave('.input-element', {
 numeral: true,
   numeralThousandsGroupStyle: 'thousand'
 });
 });

 const cleave = new Cleave('.input-element', {
 numeral: true,
  numeralThousandsGroupStyle: 'thousand'
 });

Answer 1

这是解决方案https://jsfiddle.net/ztkv8w60/19/

根据权威文献https://github.com/nosir/cleave.js，它有一个注释.input-element here is a unique DOM element. If you want to apply Cleave for multiple elements, you need to give different css selectors and apply to each of them。

这是个棘手的问题，因为 bootstrap popover 在点击图标时会创建与您的特定 div 相同的元素。因此有两个相同的元素，你必须指出哪个元素在弹出窗口中。

运行加载弹出文本输入时的 js

Run js when pop over text input is loaded

javascript

popover

cleave

运行 加载弹出文本输入时的 js

Run js when pop over text input is loaded

javascript

popover

cleave

运行加载弹出文本输入时的 js