如何在Ajax請求後在Rails中重新註冊常見JavaScript事件

我正在編寫一個Rails應用程序，其中包含使用jQuery的ajax功能。我希望你們能在這裏幫助我。如何在Ajax請求後在Rails中重新註冊常見JavaScript事件

例如，在我的/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中......這樣我的所有事件都將被重新註冊沒有我必須複製/粘貼代碼？

對不起，長時間囉嗦。希望能得到任何幫助。

來源

2010-10-21 Ghazaly

我想出了一個並不漂亮的解決方案，但它現在有助於消除代碼重複。

我只是在我的部分添加了這個：

<!-- _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文件。

來源

2010-10-21 14:52:34 Ghazaly

是的，你能做到這一點。 ..或者如果你想在你的js.erb文件中保存你的javascript，你的update.js.erb可以找到最近的.item-edit節點。如果此節點被追加到其餘項目的末尾，那麼您可以將從$（'。item-edit'）獲得的數組與其長度-1 – Samo 2010-10-28 04:23:26

jQuery提供了一個真棒的方法來做到這一點叫.live（文檔：http://api.jquery.com/live/），因爲你使用的插件，並呼籲.editable做結合

但是，你將不得不修改jEditable源使用適當地運用，這可能（或可能不）比它的價值更多的工作。

有實際上似乎是其他一些非常類似的問題：

jeditable live()

Making JEditable work on new elements (.live)

但也有一個完美的解決方案，但值得一試

來源

2011-01-20 18:09:12 spotman

如何在Ajax請求後在Rails中重新註冊常見JavaScript事件

回答

相關問題