Jquery click function, using this but return me window object

Question

all. I have html layout like this:

<div class="row" id="1">
/*Other code has nothing to do with <div class="form-group col-lg-1">*/

   <div class="form-group col-lg-1">
         <input type="button" class="btn btn-default" onclick="updateLine()" value="Update">
   </div> 
</div>

I want to obtain the div's ID, in this case, which is 1.

This is what I did.

function updateLine() {
  alert(this.parent().parent().attr("id"));
}

However, it failed, then I check

alert(this);

it returns to me the window object.

So the question is , how could I get the id's value, which is 1.

Thanks.

[How `this` works is extensively explained in the the MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this). There you will find that when a function is called as `foo()`, `this` refers to the global object. But even if `this` referred to the correct object, it would refer to as *DOM element*, not a jQuery object. I recommend to read about the basics of event handling with and without jQuery: http://learn.jquery.com/events/event-basics/, http://www.quirksmode.org/js/introevents.html. — Felix Kling, Apr 11 '14 at 21:32

score 2 · Answer 1 · answered Apr 11 '14 at 21:24

2

You need to pass this to the function as follows

<input type="button" class="btn btn-default" onclick="updateLine(this)" value="Update">

function updateLine(obj) {
 alert(obj);
 $(obj).closest('.row').attr('id'); // will return the id, note that numeric values like 1 are invalid
}

answered Apr 11 '14 at 21:24

T J

40,740
11
73
131

Could you please tell me why I can't have id attributes as numeric? Thanks – Xinrui Ma Apr 11 '14 at 21:40
@XinruiMa it seems if you're using html5 doc then its not a prob, before that it was invalid http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html – T J Apr 11 '14 at 21:50

Adam · Accepted Answer · 2014-04-11T22:50:28.490

You do not need to pass this to the function. In an event handler this is the element clicked. However, to use .parent() etc on it you need the jQuery object for that element which is $(this)

Also, I would strongly recomment using .closest instead of .parent().parent(). Something like

$(this).closest('div.row').attr('id')

Way less likely to break when you make small layout changes...

The comments about using jQuery events instead of inline javascript are also good advice.

Example:

<div class="row" id="1">
/*Other code has nothing to do with <div class="form-group col-lg-1">*/

   <div class="form-group col-lg-1">
         <input type="button" class="btn btn-default" value="Update">
   </div> 
</div>

<script type="text/javascript">
    $(function(){
        function updateLine(event){
            alert( $(this).closest('.row').attr('id') );
        }

        // If you have other buttons add a class like 'btn-update' and use that instead
        $('body').on('click', '.btn-default', updateLine);

    });
</script>

score 0 · Answer 3 · answered Apr 11 '14 at 21:25

If you want to do inline event handlers, you need to pass this:

onclick="updateLine(this)"

then in js:

function updateLine(obj) {
    alert($(obj).closest('.row').attr("id"));
}

However, I'd recommend removing the inline handler if possible and using jQuery to do the binding:

$('button').click(function() {
    alert($(this).closest('.row').attr("id"));
});

score 0 · Answer 4 · answered Apr 11 '14 at 21:55

What you are trying do is very bad practice. It will never work.

Firs, you should not use inline javascript.

Second, you should use real jQuery code.

Below you can see a working example.

<div class="row" id="1">
    <div class="form-group col-lg-1">
        <input type="button" class="btn btn-default" value="Update" id="someID" />
    </div>
</div>

And your jQuery code should be like:

$(function () {

    $('#someID').click(function () {
        alert($(this).parents('div:eq(1)').prop('id'));
    });

});

Here is a working example: http://jsfiddle.net/avramcosmin/Z9snq/

score 0 · Answer 5 · answered Jan 28 '19 at 16:01

0

A bit late but what worked for me:

$(document).on('click', '.id', function(event) {
    const elem = $(this);
})

answered Jan 28 '19 at 16:01

Daniel Dube

31
2

Jquery click function, using this but return me window object

5 Answers5