如何在Ajax请求后在Rails中重新注册常见JavaScript事件

Question

我正在编写一个Rails应用程序，其中包含使用jQuery的ajax功能。我希望你们能在这里帮助我。

例如，在我的/public/javascripts/application.js：

 
/* application.js */ 
... 

$('.item-edit').editable('/item/update', { 
    name : $(this).attr('name'), 
    id : $(this).attr('id'), 
    cancel : 'Cancel', 
    submit : 'OK', 
    indicator   : 'Saving...', 
    tooltip : 'Click to edit...', 
    method : 'put', 
    submitdata   : {attribute : "name"} 
    }); 

随着jEditable插件，此代码绑定注册元件，用于直列编辑。

所以可以说我有一个局部在app /视图/共享/ _item_info.html.erb

<!-- _item_info.html.erb --> 
... 
<li class="item-edit" id="<%= item.id %>"><%= item.name %> </li> 
... 

在第一负载，被点击任何“项目编辑”元素时，用户将被呈现带有“OK”按钮的内联文本框。点击“确定”后，会提交“PUT”请求，导致文本被保存。在这之后的文本已经保存在数据库中，我们会再通过调用呈现新的文本部分：

这是我update.js.erb是什么样子：

/* update.js.erb */ 
... 
$("#items").html("<%= escape_javascript(render('shared/item_info')) %>") 

$('.item-edit').editable('/item/update', { 
    name : $(this).attr('name'), 
    id : $(this).attr('id'), 
    cancel : 'Cancel', 
    submit : 'OK', 
    indicator : 'Saving...', 
    tooltip : 'Click to edit...', 
    method : 'put', 
    submitdata : {attribute : "name"} 
}); 
... 

您可能已经注意到，我必须重新注册我的元素以启用内联编辑，如果不是，点击元素将不会执行任何操作。我的问题是我正在重新注册其他请求中的其他事件，例如create.js.erb以及导致大量代码重复的事件。

有没有解决这个问题的方法？有没有一种方法可以将我所有常见的事件重新注册代码放在一个.js文件中，并将其包含在create.js.erb，update.js.erb中......这样我的所有事件都将被重新注册没有我必须复制/粘贴代码？

对不起，长时间啰嗦。希望能得到任何帮助。

Answer 1

我想出了一个并不漂亮的解决方案，但它现在有助于消除代码重复。

我只是在我的部分添加了这个：

<!-- _item_info.html.erb --> 
... 
<li class="item-edit" id="<%= item.id %>"><%= item.name %> </li> 
... 
<% javascript_tag do -%> 
    $('.item-edit').editable('/item/update', { 
     name : $(this).attr('name'), 
     id : $(this).attr('id'), 
     cancel : 'Cancel', 
     submit : 'OK', 
     indicator : 'Saving...', 
     tooltip : 'Click to edit...', 
     method : 'put', 
     submitdata : {attribute : "name"} 
    }); 
... 

我不再做任何重新登记在我的.js.erb文件。

Answer 2

jQuery提供了一个真棒的方法来做到这一点叫.live（文档：http://api.jquery.com/live/），因为你使用的插件，并呼吁.editable做结合

但是，你将不得不修改jEditable源使用适当地运用，这可能（或可能不）比它的价值更多的工作。

有实际上似乎是其他一些非常类似的问题：

jeditable live()

Making JEditable work on new elements (.live)

但也有一个完美的解决方案，但值得一试