如何删除自动完成的jQuery项目 [英] How to delete jQuery autocomplete item

问题描述

我的JQuery的code是：

My JQuery code is:

$(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 is the JSFiddle here

我想实现自动完成的国家名单，由一个增加一个，并显示到另一个分区。到现在为止我的code正常工作，但我需要（一一），以删除选定的国家。

I am trying to implement auto complete for list of countries, add one by one and shows into another div. Up to this point my code works fine, but I need to remove selected countries as well (one by one).

我做了什么，当我加入一个国家，我包括提一类的跨度标签;后来当我尝试访问使用jQuery的阶级，我没有得到这个类。

What I have done, when I add a country I include a span tag by mentioning a class; and later when I try to access that class using jQuery, I failed to get that class.

从我的理解，我的span标签不正确用HTML DOM的结合，这就是为什么后来它没有确定。

From my understanding, my span tag is not binding properly with HTML DOM and that's why later it's not identified.

推荐答案

您需要使用事件委托的方式对。对（）自从与<$ C $的元素C>类=del_country被动态添加。

You need to use event delegation approach for .on() since the elements with class="del_country" are being added dynamically.

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

<大骨节病> 演示

这篇关于如何删除自动完成的jQuery项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！