在rails app中更改dom后加载js文件(load js file after dom changes in rails app)

在rails app中更改dom后加载js文件(load js file after dom changes in rails app)

我正在使用active amdin gem来构建管理界面。 我想主动管理员在内部使用formtastic来构建表单。

在我的表单中，我有一个添加附件按钮，用于添加每个附件。 但我想给每个添加的附件编号。 所以我在一个单独的文件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--; } }); });

但问题是onclick事件在附件元素插入表单之前触发。 因此，在第一次单击时，它将找不到具有类.has_many_fields的元素，因此不会插入数字。

第二次点击它可以正常工作。 那么有没有办法在插入附件dom元素之后执行此脚本？

请找到呈现的DOM元素的附件。

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.

最满意答案

这是校长应该工作的未经测试的蝙蝠：

$(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 }); });

也许你在这里找到更多帮助完整的代码。

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.