通过单击获取元素的ID（JS）

Question

I need to get id of element by click.

I tried to write this function

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


function statusFilter() {

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

But when I click button it show undefined in alert

If I write it like this

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

all okay

How I can make it work in 1 variant?

Answer 1

The this context inside of statusFilter would be different,

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


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

Or you could simply bind the context of the event listener to the function statusFilter

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

And for getting the Id of an element you could simply do,

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

If your event listener is not going to contain any other function call other than statusFilter , you can just do,

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

Answer 2

You can use call or apply in this case to apply the context to the function called. Similar to this:

 $('.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> 

---

Alternatively you can just pass the element as a parameter, similar to this:

 $('.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> 

Or, as mentioned in the comments, if all you ever will call is statusFilter when clicked you can assign the method reference directly, similar to this:

 $('.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 3

The this context isn't automatically passed into your statusFilter function. You could try passing it in as a parameter like this:

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

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