CODEWITHSUNDEEP
javascriptjquery
Old Balance
Old Balance

Reputation: 49

Get id of element by click(JS)

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?

Upvotes: 0

Views: 79

Answers (3)

Lalit
Lalit

Reputation: 1369

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);
}

Upvotes: 0

Nope
Nope

Reputation: 22339

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>

Upvotes: 2

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67217

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);

Upvotes: 2

Related Questions