click（JS）で要素のIDを取得

Question

クリックして要素のidを取得する必要があります。

私は

$('.not-filled-button').click(function() { 
    statusFilter(); 
}); 


function statusFilter() { 

    // var $rows = $('#table tr'); 
    alert($(this).get(0).id); 
} 

この関数を記述しようとした。しかし、私はボタンをクリックしたときに、私はこの

$('.not-filled-button').click(function() { 
    //statusFilter(); 
    alert($(this).get(0).id); 
}); 

すべて大丈夫

のようにそれを記述する場合、それは、アラート

でundefinedを表示私はそれを1つの変種でどのように動作させることができますか？

Answer 1

あなたが呼び出される関数にコンテキストを適用するには、この場合にはcallまたはapplyを使用することができます：あなたはこのようなパラメータとしてそれを渡してみてください。これと同様に：

$('.not-filled-button').click(function() { 
 
    statusFilter(this); 
 
}); 
 

 

 
function statusFilter(element) { 
 
    // var $rows = $('#table tr'); 
 
    alert(element.id); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="someButton" class="not-filled-button">click me</button>

または、：

$('.not-filled-button').click(function() { 
 
    statusFilter.apply(this); 
 
}); 
 

 

 
function statusFilter() { 
 
    // var $rows = $('#table tr'); 
 
    alert(this.id); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="someButton" class="not-filled-button">click me</button>

---

別の方法としては、これだけに似たパラメータとしての要素を渡すことができますとして

$('.not-filled-button').click(statusFilter); 
 

 

 
function statusFilter() { 
 
    // var $rows = $('#table tr'); 
 
    alert(this.id); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="someButton" class="not-filled-button">click me</button>

Answer 2

statusFilterの内部thisコンテキストは異なるだろう、

$('.not-filled-button').click(function() { 
    statusFilter(this); 
}); 


function statusFilter(_this) { 
    alert($(_this).get(0).id); 
} 

それとも、単に機能statusFilter

$('.not-filled-button').click(function() { 
    statusFilter.bind(this)(); // Approach 1 
    statusFilter.call(this); // Approach 2 
    statusFilter.apply(this); // Approach 3 
}); 

にとのIDを取得するためにイベントリスナーのコンテキストを結合することができます単純に行うことができる要素です。

function statusFilter(_this) { 
    alert(_this.id); 
} 

イベントリスナーがstatusFilter以外の任意の他の関数呼び出しを含めるつもりはないされている場合は、あなたがちょうどすることができ、

$('.not-filled-button').click(statusFilter); 

Answer 3

thisコンテキストが自動的にstatusFilter関数に渡されていません。

$('.not-filled-button').click(function() { 
    statusFilter(this); 
}); 

function statusFilter(elementReference) { 
    alert($(elementReference).get(0).id); 
}