如何删除 jQuery 自动完成项答案

【问题标题】：How to delete jQuery autocomplete item如何删除 jQuery 自动完成项
【发布时间】：2014-01-09 22:21:49
【问题描述】：

我的 JQuery 代码是：

$(function() {
$( document ).tooltip({
  track: true
});
});
$(document).ready(function() {
  $(function() {
var availableTags = ["Bangladesh","USA","Uk","CANADA","Angola","Antigua and  Barbuda","Argentina"];
var country;
$( "#country_name" ).autocomplete({
  source: availableTags,
  autoFocus: true,
  select: function( event, ui ) {              
       country=ui.item.value;  //$('#target').text( ui.item.value );
       //$('#div_selected_country').text($('#div_selected_country').html()+"\n "+country);
       $('#div_selected_country').html($('#div_selected_country').html()+"<span>"+country+
            " <a href='?delete=1' class='del_country'>X</a></span>"+"\n ");
       $('#hid_country_names').val($('#div_selected_country').html());
       if ( ui.item ){
          $(this).val('');
          return false;
       }
  }
});
  });
});
$(document).ready(function() {
//$('a.del_country').click(function(e) {
$('a.del_country').on('click', function() { //.on in JQuery 1.9 and up instead of .live
    alert('sumon');
});
});

这里是 JSFiddle here

我正在尝试为国家列表实现自动完成，逐个添加并显示到另一个 div 中。到目前为止，我的代码运行良好，但我还需要删除选定的国家/地区（一个接一个）。

我所做的，当我添加一个国家时，我通过提及一个类来包含一个跨度标签；后来当我尝试使用 jQuery 访问该类时，我未能获得该类。

据我了解，我的 span 标签没有与 HTML DOM 正确绑定，这就是为什么后来它没有被识别出来。

【问题讨论】：

标签： jquery autocomplete

【解决方案1】：

您需要对.on() 使用事件委托方法，因为带有class="del_country" 的元素是动态添加的。

$(document).on('click','a.del_country', function(e) { 
        e.preventDefault();/* prevent browser opening href url*/
        /* remove parent span*/
        $(this).parent().remove();
});

DEMO

【讨论】：

事件委托对我有用，这正是我想要的。在我看来，每次如果我使用这个代表团，我不应该想到 html（自动生成）绑定。
如果可行，请接受答案。你问了很多问题，但似乎从来没有接受过它们。有了这个，在几个小时后创建完全相同的问题之前，您甚至从未看过这个答案