Question

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

顶级视图包含下面一行，用于标识特定领导者的表格单元格的id，并从部分单元格中呈现单元格。

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

上面的id作为要更新为jQuery的元素传递给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％的时间。有什么建议吗？

Answer 1

将事件绑定到元素的父元素之一，但不会发生变化。

像这样：

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

});

更新html时jQuery更改事件丢失

1 个答案: