Jquery 在第一次操作调用后不触发事件

Question

我实现了一个功能，用户可以在单击时直接从表输出中将对象属性更新为真/假。第一次一切正常，但是在完成 ajax 调用之后，我不能再这样做了。可能是 DOM 加载失败？

我有我的桌子：

<div id="dashboard_pages_table" class="small-12 columns">
    <%= render partial: 'layouts/admin/dashboard_pages_table', locals: {parents: @parents} %>
</div>

以及在一个 td 元素上监听点击事件的咖啡脚本：

jQuery ->
   $('#sortable .onoff').on "click", (event) ->
     page_id = event.target.parentElement.parentElement.id.match(/\d+$/)[0]
     $.post 'update_row_onoff',
      page_id: page_id

coffeescript 正在我的控制器中调用 update_row_onoff 方法：

def update_row_onoff
   @target_page = Page.find(params[:page_id])
   if @target_page.active
     @target_page.update_attribute(:active, false)
   else
     @target_page.update_attribute(:active, true)
   end
   respond_to do |format|
     format.js
   end
end

然后update_row_onoff js.erb文件正在重新加载dashboard_table的内容：

$('#dashboard_pages_table').html("<%= escape_javascript(render partial: 'layouts/admin/dashboard_pages_table', locals: {parents: @parents}) %>");

为什么在第一次成功发布操作后它不起作用？

Answer 1

改用这个

$("body").on "click", "#sortable .onoff", (event) ->

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。为确保元素存在并且可以被选择，请在页面 HTML 标记中的元素的文档就绪处理程序内执行事件绑定。如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。

详情请看api文档http://api.jquery.com/on/