为什么我不能在同一个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对象分配给变量并在同一个函数中声明它们，但没有骰子。这是一个多次切割对象的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

如果每次只启用一个？我的意思是只启用.card-input然后才启用。-phone-input？