load js file after dom changes in rails app

Question

I am using active amdin gem for building admin interface. I guess active admin uses formtastic internally for building forms.

In my form I have a Add attachment button which adds each attachments. But i want to give numbering to each attachments added. So i have implemented it as follows in a seperate file mycustomjs.js

$(document).ready(function(){
  $('.has_many_add').on('click', function(){
    if($(this).prev(".has_many_fields").length == 0)
    {
        count = 0
    }
    $(this).prev(".has_many_fields").prepend("<div>"+count++ +"</div>") 
  });   

    $('.has_many_remove').on('click', function(){
    if($(this).parent(".has_many_fields").length)
    {
        count--;
    }

  });

});

But the issue is that the onclick event fires before attachment element is inserted in the form. Hence on the first time click, it wont find the element with class .has_many_fields and hence wont insert the number.

On second click onwards it works fine. So is there a way to execute this script only after when the attachment dom elements are inserted??

Please find the attachment of the DOM element that is rendered.

Answer 1

This is untested bat the principal should work:

$(document).ready(function(){
  $(document).on('has_many_add:after', function(e, fieldset){
    # reimplement your code
  });   

  $(document).on('has_many_remove:after', function(){
    # reimplement your code
  });
});

Maybe you find some more help full code here.