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

我想使用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，我看不到我的代码与其代码之间的任何有意义的区别。选择器类已在 View 中正确应用。有什么想法为什么我似乎无法一次格式化两个字段？

最佳答案

解决了:

事实证明，它需要对象存在才能运行new Cleave。如果页面上不存在任何元素，则由于某种原因，整个操作都会失败。最后，我包装了每个new Cleave，检查是否存在该类的元素，例如:

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

更新:

甚至更好，如果您像我一样，并且需要在页面上格式化多个相同类的对象(这导致劈开仅使用上面的代码格式化第一个对象)，则检索对象数组并对每个对象运行劈开。它执行相同的“是否存在”检查以及格式化每个对象。例如:

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的使用，所以我无法预编译我的 Assets 以进行生产，并且在将let-of更改为for-in的同时也可行，但最终还是使用了更具体的forEach循环。

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