1

組織のリーダーのテーブルが表示され、それぞれが「アクティブ」か「退職」かを示すラジオ ボタンのペアを持つ Rails アプリケーションがあります。ボタンが押されると、Ajax を使用して状態がデータベースに保存され、成功メッセージ (または失敗メッセージ) が表示され、プログラムに従って消えます。ただし、リーダーの最初のボタンの変更は機能しているように見えますが、各リーダーの後続の変更イベントは検出されません。これに似た問題のある投稿をいくつか見つけましたが、それらの解決策はどれも確実に機能していないようです。私は何かが欠けているに違いない。

最上位ビューにはid、特定のリーダーのテーブル セルを識別し、パーシャルからセルをレンダリングする以下の行が含まれています。

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

上記は更新する要素としてjQueryにid渡されます。data-updateパーシャル_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 メッセージが表示され、期待どおりにフェードします。次に、代替ラジオ ボタンをクリックしても何も起こりません。ただし、ボタンをクリックすると、すべてが発生したように見える場合がありますが、ボタンの表示は以前の状態に戻ります。問題のある部分を交換した場合：

$(update_id).html(data);

と

alert("An Event! " + data);

アラートは毎回発生します。問題のコードでは、テーブル セルを更新すると、後続の変更イベントの発生がブロックされます。私が変更した場合：

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

に

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

これはうまく機能しますが、それでも、たとえば 90% の確率でしか機能しません。代わりに使用.onすると、おそらく 10% の確率で機能します。助言がありますか？

4

1 に答える 1

4

変更されない要素の親の 1 つにイベントをバインドします。

このような：

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

});
于 2012-12-08T13:36:23.473 に答える