更新html时jQuery更改事件丢失

Question

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

顶级视图包含下面的行，该行标识特定领导者的表格单元格的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 消息会按预期显示并淡出。如果我然后单击备用单选按钮，则不会发生任何事情。但是，在某些情况下，当我单击按钮时，一切似乎都发生了，但按钮的显示又变回了之前的状态。如果我更换问题部分：

$(update_id).html(data);

与

alert("An Event! " + data); 

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

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

到

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

这效果更好，但仍然只有 90% 的时间。如果我改用 .on，它可能有 10% 的时间有效。有什么建议吗？

Answer 1

将事件绑定到元素的不改变的父元素之一。

像这样：

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

});