Как применить JS к добавленным пользователем строкам в tabel

Question

Я использую рельсы для создания формы, которая позволяет пользователю нажимать кнопку, чтобы добавить новую строку в таблицу. На данный момент пользователь может нажать кнопку «Добавить», и появится новая строка.

У меня возникла проблема с столбцом, который использует autoNumeric для маскирования процентов. JS не применяется к столбцам, которые пользователь создает динамически. Я использую классы, поэтому я смущен, почему autoNumeric masking не применяется к новым строкам, поскольку пользователь их добавляет. Класс «процент» работает с другими частями формы.

# JS 
$(function() { 
    $('.percentage').autoNumeric('init', {aSign: '%', pSign: 's'}); 
}); 

# the field is set to the proper class 
<tr class="fields"> 
    <td><input class="percentage" placeholder="Equity %" type="text"></td> 
</tr> 

# link that adds a new row 
<a class="add_nested_fields" data-association="business_contacts" data-blueprint-id="business_contacts_fields_blueprint" data-target="#business_contacts" href="javascript:void(0)">Add a field</a> 

Каждая добавленная строка имеет класс = "поля". Я попробовал JS onClick, но не получил успешных результатов.

Answer 1

Когда ваш JS запускается после загрузки страницы, autoNumeric вызывается для всех элементов DOM, присутствующих на данный момент, с классом .percent. Но когда вы добавляете новую строку, вам нужно снова позвонить autoNumeric. Например:

Function addRow(){  $.('.container').append(this.$row);  $.('.percent').autoNumeric();} 
Or you can share ur js code so I can help better. 

$.('.add_nested_fields').click(function()$.('.percent').autoNumeric();}) 

Edit: решение, найденное спрашивающего @Questifier

$(function() { $(document).on('nested:fieldAdded', function(event){ $('.percentage').autoNumeric('init', {aSign: '%', pSign: 's'}); })}); 

работает отлично. После того, как вы спросили меня, я прочитал больше об этом камне. Скопируйте этот код и сделайте его ответом, если хотите, спасибо за помощь.