JavaScriptのバインド引数が正しく

Question

コンテナdivの中に次のbootstrap3ボタンコードが含まれています。ボタンにはplusアイコン以外のテキストはありません。続き

<div id="container"> 
    ... 
    <a type="button" class="btn btn-success input-sm btn-add"> 
     <span class="glyphicon glyphicon-plus-sign black" aria-hidden="true"></span> 
    </a> 
    ... 
</div> 

はplusボタンのイベントリスナーと私のJS-Objectです。

var query_builder = { 
    init: function() { 
     this.cacheDom(); 
     this.bindEvents(); 
    }, 
    cacheDom: function() { 
     this.$container = $("#container"); 
     ... 
    }, 
    bindEvents: function() { 
     this.$container.on('click', '.btn-add', this.addRule.bind(this)); 
     ... 
    }, 
    addRule: function(evt) { 
     ... 
     ... 
     $(evt.target).addClass('invisible'); 
    } 
} 

• 私はplusアイコン外であるが、ボタン内の任意の場所をクリックし

  は、イベントがトリガされますし、最後にそれが見えなくなります。

• アイコンをちょう​​どクリックすると、イベントが発生しますが、アイコンは表示されず、ボタンは空白のままです。イベントをバインドするときに、ボタンのコンテキストを正しく渡す方法がわかりません。

注：私はオブジェクト指向JavaScriptを使い慣れていません。

Answer 1

evt.currentTargetを使用してください。これはイベントの委任と関係がある特別なjQueryイベントフィールドです。私はより確かな答えを持っていればいいのに、それはあなたのために働いてうれしいです:)

編集：ここにいくつかのドキュメントがあります。

event.currentTarget

https://api.jquery.com/event.currentTarget/

説明：イベントバブリング相内の現在のDOM要素。

このプロパティは通常、関数のthisプロパティと同じです。

event.target

https://api.jquery.com/event.target/

説明：イベントを開始したDOM要素。

ターゲットプロパティは、イベント またはその子孫に登録されたエレメントです。イベント のバブリングによりイベントが処理されているかどうかを判断するために、event.targetを と比較すると便利なことがよくあります。このプロパティは、 イベントのバブルが発生した場合のイベント委譲に非常に役立ちます。