jQuery click target selector

Question

I have the following HTML in a page:

<a href="javascript:void(0)" class="move-next"><img src="/Content/images/small-next-arrow.png" height="16" width="16" alt="Next status arrow" title="Progress to next status"/></a></div>

and I have the following javascript that attempts to handle the click event:

function InitProgressionSelectors() {
$(".move-next").click(function() {
    moveNext(this);
});

$(".move-previous").click(function() {
    movePrevious(this);
});
}

function moveNext(target) {
    var sourceContainer = target.parent("td");
    var targetContainer = sourceContainer.next("td");
}

I'm obviously missing something, because "target" in the moveNext function is returning an HTMLAnchorElement, but when I try to wrap that, or access it somehow as a jQuery object, so I can try to get a handle to it's parent container, I get errors.

A reference to $(target) returns null. How do I get a reference to target as a jQuery object so I can work with it in that context? What am I missing?

Thanks.

Could you perhaps post a demo that reproduces your problem at JS Fiddle or JS Bin? — David Thomas
– David Thomas, Commented Dec 5, 2010 at 19:39
idon't remeber whether parent and next belongs to jquery api or regular javascript , right now you are just passing this and using this.parent , if you want to use jquery , you need to use $(this).parent /// — kobe
– kobe, Commented Dec 5, 2010 at 19:43
Wow...I'm an idiot. @gov - You were right, I needed to be passing $(this), not just "this". That got me where I needed to be. Thanks. — Bob Yexley
– Bob Yexley, Commented Dec 5, 2010 at 19:48

Rodolpho Freire · Accepted Answer · 2012-10-01 18:23:13Z

3

You need pass the jquery object

$(".move-previous").click(function() {
    movePrevious($(this));
});

answered Oct 1, 2012 at 18:23

Rodolpho Freire

2102 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bob Yexley · Accepted Answer · 2011-05-09 19:54:16Z

1

As I mentioned in the comments below, using $(target) didn't work. However, as can be seen in the comments on the original question above, the solution was to actually pass $(this) as the argument. Once I did that, target.parent resolved to the expected node, and worked.

bob can you try using dollor

$(target)

var sourceContainer = $(target).parent("td");

edited May 9, 2011 at 19:54

Bob Yexley

2,7744 gold badges25 silver badges35 bronze badges

answered Dec 5, 2010 at 19:40

kobe

15.9k15 gold badges67 silver badges93 bronze badges

2 Comments

Bob Yexley Over a year ago

"A reference to $(target) returns null" ...so, $(target).parent("td") returns an error.

kobe Over a year ago

@bob can you do a alert before calling the function do a alert(this) , it should print object object///otherwise you have to post the html in jsfiddle

Gary Gause · Accepted Answer · 2014-08-27 19:04:29Z

0

Another alternative is to pass the function in by reference:

$(".move-next").click(moveNext);

You can then use the selector as expected:

function moveNext() {
    var sourceContainer = $(this).parent("td");
    var targetContainer = sourceContainer.next("td");
}

Please note the lack of parentheses when passing the function to the click handler.

answered Aug 27, 2014 at 19:04

Gary Gause

12 bronze badges

Collectives™ on Stack Overflow

jQuery click target selector

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related