Question

128

Jquery click function, using this but return me window object

rated 0 times [ 135] [ 7] / answers: 1 / hits: 5746 / 10 Years ago, fri, april 11, 2014, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaelyn

Add To Favorites

Follow

Total Points: 619

Total Questions: 102

Total Answers: 104

Location: Honduras

Member since Sun, Dec 26, 2021

2 Years ago

jaelyn questions

1 How to configure vue 3 router children properly to have nested routes working as expected?

Mon, Apr 11, 22, 00:00, 2 Years ago

1 The best way to pass authorization header in nextJs using Apollo client? ReferenceError: localStorage is not defined

Thu, Jul 23, 20, 00:00, 4 Years ago

1 React send multiple requests in a loop and wait

Tue, Apr 28, 20, 00:00, 4 Years ago

1 How can I change the checkbox styles and icons when hover on it in Material-UI React?

Thu, Mar 19, 20, 00:00, 4 Years ago

1 Node.js spawn: Keep StdOut and StdErr in the original order

Mon, Jul 15, 19, 00:00, 5 Years ago

View All

answered 10 Years ago haden · Accepted Answer

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>