Jqueryプラグインで新しいクリックイベントを追加

Question

私はオートコンプリートを使用するタグプラグインを作成しようとしています（jquery ui：https://jqueryui.com/autocomplete/）。ドロップダウンリストの値をクリックすると、それを削除するために十字でスパンが作成されます。

私の質問は、新しい作成スパンのクロスサインのクリックイベントを自分のプラグインに登録する方法です。

/** 
* Tags Autocomplete 
* 
* Create tags through autocompletion 
*/ 
(function($) 
{ 
    'use strict'; 

    $.fn.tagsAutocomplete = function(options) 
    { 
     // defaults 
     var defaults = { 
      autocomplete : { 
       source : "", 
       test_data: ["test", "testing", "tester", "John DOe"] 
      }, 
      tags : { 
       class : "tag" 
      } 
     }; 

     // selected element 
     var elm = this; 

     // extend the options 
     var o = $.extend(true, defaults, options); 

     // Start autocomplete 
     $(elm).autocomplete({ 
      minLength: 0, 
      source: o.autocomplete.test_data, 
      select: function(event, ui) { 
       // add tag to DOM, before the input with a remove_tag 
       $(this).before('<span class="tag tag-green tag-new">'+ui.item.value+'' + 
        '<span class="remove_tag"></span>' + 
        '</span>'); 

       // clear input 
       this.value = ""; 

       // return false 
       return false; 
      } 
     }); 

     /** 
     * Remove span after clicking the cross 
     * @param obj 
     */ 
     function removeSpan(obj){ 
      alert('clicks works'); 
      //obj.closest(o.tags.class).remove(); 
      // focus input 
      //obj.focus(); 
     } 

     // bind events 
     this.bind("click.remove_tag", removeSpan); 

     // return elm for chaining 
     return elm; 
    }; 
})(jQuery); 

私はこれを試しました：this.bind（ "click.remove_tag"、removeSpan）; しかし、それは動作しません。

は、どのように私はあなたがnamepacedイベントを使用して、あなたがクラスをターゲットにしていないしているクラス名remove_tag

Answer 1

で新しい作成スパンにクリックイベントを追加することができます。新しく作成されたダイナミックspan要素をターゲットに

、あなたは

elm.parent().on("click", ".remove_tag", removeSpan); 

を行いたいとスパンがelm要素の前に挿入されているので、あなたは親要素

function removeSpan(evt){ 
    $(evt.target).closest('.remove_tag').focus().closest(o.tags.class).remove(); 
} 

Answer 2

に委譲する必要がありますこのようなことを試しましたか？

$("#foo").bind("click", function() { 
    removespan(); 
}); 

Answer 3

私はこのような私のremoveSpan機能があります。

/** 
    * Remove span after clicking the cross 
    */ 
    function removeSpan(){ 
     // remove tag 
     $(this).closest($(o.tags.class)).remove(); 
     // focus input 
     $(elm).focus(); 
    } 

をクリックそしてスパンが削除されます。

私は別の質問があります。最初にタグがどのように構築されているかを説明しましょう。

これは、あなたが見ることができるように、私は好きにこの

を見て、私のhtml

<div class="tags_container"> 
    // jquery add the spans (tags) here before the input placeholder 
    <input class="tag_input" name="testFoo" type="text" placeholder=""/> 
</div> 

で、タグの後に入力プレースホルダがあります。今、バックスペースで最後のスパンを削除するオプションが必要です。私はこれを前に試しました。しかし、いくつかの難しさがあります。

バックスペース上の文字を数え、 "j"がバックスペースに置かれると、カウントは0になります。ユーザーが今すぐバックスペースを押すと、最後のタグを削除する必要があります。しかし、長さは-1になることはできませんでした。この問題を解決する一般的な方法は何ですか？