制作委派的jQuery自动完成

I am using the following code to create an auto-complete textbox. The jQuery is as follows.

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

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

The HTML is as follows.

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>

The Auto-complete works for the first row. However, when the second row is created by clicking on the "Add a row" button in the above code (Its all working fine), the Auto_complete just isn't working on the subsequent rows. I sorted out that I would need a delegated handler for that. SO how can I convert my current jQuery selector to a delegated one?

自动完成适用于第一行。但是,当通过单击上面代码中的“添加行”按钮创建第二行时(其工作正常),Auto_complete就不能用于后续行。我整理出来,我需要一个委托的处理程序。那我怎么能将我当前的jQuery选择器转换为委托的?

I Kinda wrote it like the following based on the answer, but it's still not working.

我有点基于答案把它写成如下,但它仍然不起作用。

   $('#items').delegate('#items .slno','keyup', function () {   

  $(this).autocomplete({
         source: 'search.php'
    });

  });

Then I went on to use the following.

然后我继续使用以下内容。

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

and it too failed. How do I achieve this?

它也失败了。我该如何实现这一目标?

UPDATE

In the above example, the ordering of the event was messed up. Just needed touse the proper syntax

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

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

Which makes my code look like the following.

这使得我的代码如下所示。

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

And it did the task !!!

它完成了任务!

1 个解决方案

#1

The code below worked for me like a charm.

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

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