使委托的 jQuery 自动完成

Make a delegated jQuery Auto-complete

本文关键字：jQuery      更新时间：2023-09-26

我使用以下代码创建一个自动完成文本框。jQuery如下。

$(function() {
   $( "#items .slno" ).autocomplete({
      source: 'search.php'
   });
});

HTML 如下所示。

<table id="items">
     <tr class="item-row">
            <td class="item-name"><div class="delete-wpr"><a class="delete" href="javascript:;" title="Remove row">-</a></div></td>
            <td><input type="text" id="slslno" class="slno"/></td>
            <td><input type="text" class="cost"/></td>
            <td><input type="text" class="qty"/></td>
            <!--  <td><span class="price"></span></td>-->
            <td class="price"></td>
            <a class="add" id="addrow" href="javascript:;" title="Add a row">+</a> </tr>
</table>

自动完成功能适用于第一行。但是，当通过单击上述代码中的"添加行"按钮创建第二行时（一切正常），Auto_complete只是不适用于后续行。我整理出我需要一个委派的处理程序。那么如何将我当前的 jQuery 选择器转换为委托选择器呢？

我有点根据答案写了如下，但它仍然不起作用。

   $('#items').delegate('#items .slno','keyup', function () {   
  $(this).autocomplete({
         source: 'search.php'
    });
  });

然后我继续使用以下方法。

  $(function(){
  $('#items').on('.slno','keyup.autocomplete', function(){
    $(this).autocomplete({
      source : 'search.php'
    });
  });
});

它也失败了。我如何实现这一点？

更新

在上面的例子中，事件的顺序被搞砸了。只需要使用正确的语法 

$(selector).on(event,childSelector,data,function,map)

这使我的代码如下所示。

  $(function(){
  $('#items').on('keyup.autocomplete','.slno', function(){
    $(this).autocomplete({
      source : 'search.php'
    });
  });
});

它完成了任务!!

下面的代码对我就像一个魅力。 

$(function(){
      $('#items').on('keyup.autocomplete','.slno', function(){
        $(this).autocomplete({
          source : 'search.php'
        });
      });
    });
相关文章：