Adding click listener to an array of JQuery objects

Question

Here is my javascript:

function scrollTo(position) {
    $('body').animate({
        scrollTop: position
    }, 500);
}

var titles = $('.title');
for(var i = 0; i < titles.length; i++) {
    titles[i].click(function() {
        console.log('click');
        scrollTo(0);
    });
}

It's supposed to select all three titles and apply a click listener that will scroll the page back to the top. Unfortunately I am not getting the message in the console nor is it scrolling.

Everywhere I have looked online has given for loops exactly like this to apply a click listener to multiple JQuery objects but for some reason it won't work for me. I'm afraid I may have made a stupid mistake but I can't find it.

You need $(titles[i]).click(...); for that to work. Or titles.eq(i).click(...) — user5734311
– user5734311, Commented Jun 21, 2017 at 0:52

Sushanth -- · Accepted Answer · 2017-06-21 01:22:20Z

2

The reason your code did not work was because of this line

titles[i].click(function() {

When you access a jQuery object with a index, you are technically accessing the DOM element and not the jQuery object anymore. And the DOM object does not have a click method. If you would have opened your console, you would have seen an error. If you still want to use a for loop, you will have to convert that to a jQuery object first.

$(titles[i]).click(function() {

If you would have done that, it would work as expected.

Also if you still do not want to double wrap it, you could have also used .eq to get the jQuery object from the array.

titles.eq(i).click(function() {

You need not iterate over the jQuery objects to assign event handlers. You could just do it in one line.

$('.title').click(function() {
    console.log('click');
    scrollTo(0);
 });

Also check the version of jQuery you are using, if it is the latest then you could use on

$('.title').on('click', function() {

Also you need to make sure that the elements with class title are present on the page when you associate the events.

edited Jun 21, 2017 at 1:22

answered Jun 21, 2017 at 0:48

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

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

1 Comment

Scoob Over a year ago

This worked thank you! Why would the way I did it not work? I've used .click() on single JQuery objects before.

Nicholas Louis · Accepted Answer · 2017-06-21 01:01:59Z

1

you can use this, should give you what your looking for.

$('.title').click(function () {
   $('body,html').animate({
        scrollTop: 0
    }, 600);
    return false;
});

also as Sushanth said, if you have a new version of jQuery you can use .on(click)

answered Jun 21, 2017 at 1:01

Nicholas Louis

277 bronze badges

Collectives™ on Stack Overflow

Adding click listener to an array of JQuery objects

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related