當更新html時，jQuery更改事件丟失了

我有一個Rails應用程序，它有一個組織領導者的顯示錶格，每個表格都有一對單選按鈕，用於指示他們是「活動」還是「退休」。當按下按鈕時，使用Ajax將狀態保存到數據庫，並顯示成功消息（或失敗消息），然後按程序消失。但是，雖然任何領導者的第一次按鈕更改似乎都有效，但未檢測到每位領導者的後續更改事件。我發現了幾個類似這樣的問題的帖子，但是這些解決方案似乎沒有可靠的工作。我肯定錯過了什麼。當更新html時，jQuery更改事件丟失了

頂級視圖包含下面的行，用於標識特定領導者的表格單元格的id並從部分呈現單元格。

<td id="status_<%= leader.id %>_cell"><%= render(:partial => 
    "connections/edit/leader_status", :locals => { 
    :leader => leader, :display_response => "" }) %> 
</td>

的id以上通過data-update傳遞作爲元素被更新以jQuery的。局部_leader_status.html.erb包含：

<%= display_response.html_safe -%> 

<%= radio_button_tag("status_#{leader.id}", 'Active', (leader.role == 'ActiveLeader'), 
    :class => "leader_status", data: { url: url_for(action: :toggle_leader_status, 
    id: leader.supporter.id), update: "status_#{leader.id}_cell"} 
) %> Active 
<%= radio_button_tag("status_#{leader.id}", 'Retired', (leader.role == 'RetiredLeader'), 
    :class => "leader_status", data: { url: url_for(action: :toggle_leader_status, 
    id: leader.supporter.id), update: "status_#{leader.id}_cell"} 
) %> Retired

在toggle_leader_status控制器代碼響應重新呈現狀態的細胞是：

render(:partial => "connections/edit/leader_status", :locals => { 
    :leader => @entity.leader, 
    :display_response => 
    "<div id='#{id}' class='#{klass}'>#{message}</div>" + 
    "<script type='text/javascript'>$('##{id}').fadeOut(#{duration})</script>" 
})

而jQuery代碼是：

<%# parameterized so only one copy is needed for all radio buttons %> 
<script> 
    $(function($) { 
    $(".leader_status").change(function(){ 
     // get id of element to stuff response into 
     var update_id = "#" + this.getAttribute('data-update'); 
     $.ajax(this.getAttribute('data-url'), {dataType: 'text'}).done(
     function(data) { $(update_id).html(data); } // problem part 
    ); 
    }) 
    }); 
</script>

第一我點擊一個改變其狀態的單選按鈕，頁面的HTML被正確更新（通過FireBug驗證） - 通常 - 和display_response消息是dis按預期播放並消失。如果我然後點擊備用單選按鈕沒有任何反應。然而，在某些情況下，當我點擊一個按鈕時，一切似乎都會發生，但按鈕的顯示會變回其先前的狀態。如果我更換問題部件：與

alert("An Event! " + data);

$(update_id).html(data);

警報發生的每一次。使用問題代碼，更新表格單元格會阻止後續更改事件的發生。如果我改變：

$(".leader_status").change(function(){

到

$(".leader_status").live('change', function(){

這個工作得更好，但仍然只，也就是說，90％的時間。如果我使用.on，它可能會有10％的時間工作。有什麼建議麼？

來源

2012-12-08 George Shaw

你嘗試過用_'.on（）'_處理 – Jai

如果你在閱讀後的最後一行，你會看到我試過，但沒有奏效。 –

將事件綁定到不改變的元素父項之一。

像這樣：

$('table').on('change', '.leader_status', function(){ 

});

來源

2012-12-08 13:36:23

謝謝，完美無缺！我是jQuery的新手。我曾嘗試以某種方式附加到元素的父元素，但由於它沒有工作而弄錯了。 –

當更新html時，jQuery更改事件丟失了

回答

相關問題