Question

我有以下代码可以使用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>

Answer 1

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

您需要在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);
     }
});

jQuery调用在Ajax之后不起作用

1 个答案: