更新 html 时 jQuery 更改事件丢失

Question

我有一个 Rails 应用程序，其中显示了一个组织领导者表格，每个领导者都有一对单选按钮，用于指示他们是“活跃”还是“退休”。当按下按钮时，Ajax 用于将状态保存到数据库中，并显示一条成功消息(或失败消息)，然后按编程消失。然而，虽然任何领导者上的第一个按钮更改似乎都有效，但不会检测到每个领导者上的后续更改事件。我发现了几个有类似问题的帖子，但其中的解决方案似乎都不能可靠地工作。我一定是错过了什么。

顶级 View 包含下面的行，该行标识特定领导者的表格单元格的 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 中响应重新渲染状态单元格的 Controller 代码为:

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 验证)，并且显示响应消息会按预期显示和消失。如果我单击备用单选按钮，则什么也不会发生。然而，在某些情况下，当我单击按钮时，似乎一切都发生了，但按钮的显示又回到了之前的状态。如果我更换有问题的部分:

$(update_id).html(data);

与

alert("An Event! " + data); 

警报每次都会发生。对于有问题的代码，更新表格单元格会阻止后续更改事件的发生。如果我改变:

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

至

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

这效果更好，但仍然只有 90% 的时间。如果我使用 .on 来代替，它的成功率可能是 10%。有什么建议吗？

Answer 1

将事件绑定(bind)到不更改的元素的父元素之一。

像这样:

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

});