CODEWITHSUNDEEP
javascriptjquery
Marc Rasmussen
Marc Rasmussen

Reputation: 20565

Jquery find element returns undefined

I have the following HTML:

    <button class="btn btn-xs btn-success m-t-xs invite_accept">Accept</button>
<button class="btn btn-xs btn-danger m-t-xs invite_decline">Decline</button>
<input type="hidden" value="<?php echo $notification['team_id']?>" class="team_id">
<input type="hidden" value="<?php echo $notification['invite_id']?>" class="invite_id">

Now when the accept button is pressed i have the following Javascript:

$('.notifications').on('click', '.invite_accept', function(){
    accept_invite($(this).next('.team_id').val(), $(this).next('.invite_id').val());
});

However this returns undefined.

   function accept_invite(team_id, invite_id){
   alert(''+team_id+' '+invite_id);
}

Can anyone point me in the right direction? i have been debugging this for an hour now using both next and find

Upvotes: 1

Views: 732

Answers (2)

Rahul
Rahul

Reputation: 988

$(this) in click function refers to the button and next() will only return adjacent control. Assuming $(".notifications") is a container so you can find your control in that container like $(".notifications").find(".team_id").val().

Upvotes: 0

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67217

In your context .team_id and .invite_id are not the next(immediate) siblings of the current element. So you should use .siblings() to achieve what you want.

Try,

$('.notifications').on('click', '.invite_accept', function(){
    accept_invite($(this).siblings('.team_id').val(), $(this).siblings('.invite_id').val());
});

Upvotes: 5

Related Questions