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

Question

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

我有 2 个文本输入

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

问题出在弹出文本输入上，其中 cleave 文本格式不起作用。

我相信它可能与元素不存在有关？我试着听听听众，但到目前为止还没有运气。.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 相同的元素。因此有两个相同的元素，你必须指出哪个元素在弹出框中。