为什么不能在同一个js文件中创建两个cleave.js格式的字段？

Question

我想使用cleave.js (在rails中)对电话和信用卡输入进行格式化。如果我只声明了一个new Cleave对象，我就可以进行格式化了，但是如果我试图声明两个对象，我就会得到这个错误：

Uncaught Error: [cleave.js] Please check the element

以下是JS文件的相关部分：

var Global = {};

Global.onLoad = function(){
  Global.setupDatepickers(); //unrelated function
  Global.setupCleavePhone();
  Global.setupCleaveCreditCard();
};

$(document).on('turbolinks:load', function(){
  Global.onLoad();
});

Global.setupCleavePhone = function() {
  new Cleave('.phone-input', {
    phone: true,
    phoneRegionCode: 'US',
    delimiter: '-'
  });
}

Global.setupCleaveCreditCard = function() {
  new Cleave('.card-input', {
    delimiter: '-',
    blocks: [4,4,4,4]
  });
}

我已经尝试了几种混合的方法，包括将Cleave对象分配给变量，并在同一函数中声明它们，但没有骰子。这是一次删除多个cleave对象的jsfiddle，我看不出我的代码和他们的代码有任何有意义的区别。选择器类在视图中得到了正确的应用。你知道为什么我不能同时格式化两个字段吗？

Answer 1

已解决：

事实证明，它需要对象存在才能运行new Cleave。如果其中一个元素在页面上不存在，整个操作就会因为某种原因而失败。我最终包装了每个new Cleave，检查包含该类的元素是否存在，例如：

if ($('.card-input').length) {
  new Cleave('.card-input', {
    delimiter: '-',
    blocks: [4,4,4,4]
  });
}

更新：

或者更好的是，如果您像我一样，需要在页面上格式化同一类的多个对象(这会导致cleave只使用上面的代码格式化第一个对象)，检索对象数组并对每个对象运行cleave。它执行相同的‘它是否存在’检查，以及格式化每个对象。例如：

for(let field of $('.zip_code').toArray()){
  new Cleave(field, {
    numericOnly: true,
    delimiter: ' ',
    blocks: [5,4]
  });
}

再次更新：

因此，正如我所理解的那样，上面的let-of循环(就像for-in循环一样)将遍历数组的可枚举对象，而不仅仅是遍历它的索引，所以上面的循环并不理想。如果你也想解释一下这是怎么回事，请看一下这个答案：For-each over an array in JavaScript?。

同样，我不能为生产预编译我的资产，因为它讨厌使用let，虽然将let-of更改为for-in也是有效的，但我最终使用了更具体的forEach循环。

$('.zip-code').toArray().forEach(function(field){
   new Cleave(field, {
      numericOnly: true,
      delimiter: ' ',
      blocks: [5,4]
   })
});

Answer 2

如果每次工作时只启用一个？我的意思是只启用卡片输入，然后才启用。-电话输入？

Answer 3

这应该也行得通。

$('.zip-code').each(function (index, ele) {
    var cleaveCustom = new Cleave(ele, {
        numericOnly: true,
        delimiter: ' ',
        blocks: [5, 4]
    });
});