如何使用茧宝石屏蔽输入？答案

【问题标题】：How to mask inputs using cocoon gem?如何使用茧宝石屏蔽输入？
【发布时间】：2020-09-23 00:18:43
【问题描述】：

所以，我有一个这样的 javascript：

$(document).on("turbolinks:load", function() {
 $('#client_phone').mask('(00)00000-0000');
});

它仅适用于第一个元素，当我单击“添加新字段”时，掩码不适用。所以我尝试使用茧回调，像这样：

$(document).on('turbolinks:load', function() {
 $('#phone_clients').on('cocoon:after-insert', function() {
  $('#client_phone').mask('(00)00000-0000');
 });
});

但它不起作用，我已经在回调中使用 alert('something') 进行了测试，它已经出现了。所以我不知道为什么面具不适用。

请大家帮帮我好吗？

【问题讨论】：

添加新字段时，#client_phone id 在 DOM 中出现了两次。所以，当你屏蔽它时，它总是屏蔽第一个元素。您可能需要在插入后回调中使用$(this).find('#client_phone')
$(document).on('turbolinks:load', function() { $('#phone_clients').on('cocoon:after-insert', function() { $(this ).find('#client_phone').mask('(00)00000-0000'); }); });
@Emu 做到了，但没有用 :(

标签： ruby-on-rails ruby-on-rails-4 ruby-on-rails-5

【解决方案1】：

试试下面的：

$(document).on('turbolinks:load', function() {
   $('#phone_clients').on('cocoon:after-insert', function(e, insertedItem) {
      $(insertedItem).find('#client_phone').mask('(00)00000-0000');
   });
});

【讨论】：