jQuery 调用在 Ajax 之后不起作用答案

【问题标题】：jQuery call not working after AjaxjQuery 调用在 Ajax 之后不起作用
【发布时间】：2018-08-13 11:31:45
【问题描述】：

我有以下代码可以使用 X-Editable 自动打开下一个输入字段：

$('#rates .editable').on('hidden', function(e, reason){
 if(reason === 'save' || reason === 'nochange') {
  var $next = $(this).closest('tr').next().find('.editable');

  setTimeout(function() {
   $next.editable('show');
  }, 300);
 }
});

它一直工作到完成 Ajax 调用以获得新的费率。之后它不再起作用。我尝试使用事件委托，但它根本不起作用：

$('#rates').on('hidden', '.editable', function(e, reason){
 if(reason === 'save' || reason === 'nochange') {
  var $next = $(this).closest('tr').next().find('.editable');

  setTimeout(function() {
   $next.editable('show');
  }, 300);
 }
});

这是 Ajax 调用：

$("#todaysrates").html("<%= escape_javascript(render(:partial => 'todaysrates')) %>")

这就是代码的样子：

<div id="todaysrates">
 <%= render :partial => 'todaysrates' %>
</div>

而部分todaysrates 包含：

<table id="rates" class="table table-bordered table-striped">
....
</table>

【问题讨论】：

ajax 在哪里？？
您是否正在重新渲染#rates 或.editable 上的任何控件？如果是这种情况，您需要重新绑定事件
现在将 ajax 调用添加到主帖 @GüneySaramalı
您的第二个代码块应该可以工作，除非您在 ajax 调用中替换/更新 #rates 元素，或者您以其他方式动态创建 #rates。如果您显示使用过的 html，将会有所帮助。
只是为了澄清@MarkBaijens，#rates 是#todaysrates 的子元素

标签： jquery ajax ruby-on-rails-5 x-editable

【解决方案1】：

您正在替换 #rates 控件，因为它是 #todaysrates 的子控件。因此，元素事件没有附加任何代码，因为它们本质上是一个新元素。

你需要在你的 ajax 之后重新绑定。

$("#todaysrates").html("<%= escape_javascript(render(:partial => 'todaysrates')) %>")

并重新附加代码以触发您的隐藏事件...

$('#rates .editable').on('hidden', function(e, reason){
     if(reason === 'save' || reason === 'nochange') {
         var $next = $(this).closest('tr').next().find('.editable');

         setTimeout(function() {
             $next.editable('show');
         }, 300);
     }
});

【讨论】：