Next and Previous Buttons with JQuery

Question

I'm currently working on a website that when you click on a project image, a full screen overlay pops up with information about the project and additional images. I also would like next and previous buttons to cycle through the projects. I've made the next button work, but it only goes to the next project once. If I click it again, nothing happens.

The website I'm working on is here and I have made a JSBin to show a sample of how my HTML is structured as well as my JQuery.

Could anyone please take a look and help me figure out where I'm going wrong?

For this case and future referance, pls always include key sections of source code in post to help users assess the problem and whether they can help - relying solely on external fiddle or simliar is bad form (see 'Help others reproduce issue' in http://stackoverflow.com/help/how-to-ask) — Daniel Brose, Sep 03 '15 at 02:58
Try changing `$('.next-button').click(function(){` to `$('#overlay').on('click', '.next-button', function(){` or change your logic so the elements are not dynamically created — Wesley Smith, Sep 03 '15 at 03:44
@Tiffany pls mark this answer as helpful if you found it helpful. You can accept it by clicking the tick that appears beside the answer on hover :) thanks. — Rachel Gallen, Sep 03 '15 at 03:46
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Wesley Smith, Sep 03 '15 at 03:53

Rachel Gallen · Accepted Answer · 2015-09-03T04:14:23.277

2

The simplest way is to separate your recent projects from your additional projects and put next and prev functions in for both of them.

This is how you would display your additional projects on previous and next button click. I notice your text disappears on hover. Might wanna adjust that!

 $('.prev-button').click(function() {
    $('.additional-project').hide();
    var previous = $(this).closest('.additional-project').prevAll('.additional-project').eq(0);
    if (previous.length === 0) previous = $(this).closest('.additional-project').nextAll('.additional-project').last();
    previous.show();
});

$('.next-button').click(function() {
    $('.additional-project').hide();
    var next = $(this).closest('.additional-project').nextAll('.additional-project').eq(0);
    if (next.length === 0) next = $(this).closest('.additional-project').prevAll('.additional-project').last();
    next.show();
});

edited Sep 03 '15 at 04:14

answered Sep 03 '15 at 03:43

Rachel Gallen

27,943
21
72
81

Note that this will not work as long as the OP continues to add their buttons like this `var $prevButton = $("
"); var $nextButton = $("");` which is why the button stops working in currently, because the button the function was bound to has been replaced by a newly created button, just making sure they realize that – Wesley Smith Sep 03 '15 at 03:45
well she can adjust the code to $prevButton.click and $nextButton.click - it's only example code - we are here to assist not to write code for people – Rachel Gallen Sep 03 '15 at 03:49
Sure, of course. I just mean that the OP stated "I've made the next button work, but it only goes to the next project once. If I click it again, nothing happens." and clearly doesnt understand that this is happening precisely because they are loading the buttons dynamically. While your answer certainly proposes a better way to accomplish the task, I think it's important for the OP to understand what the actual problem with their code is, thats all :) – Wesley Smith Sep 03 '15 at 03:53
Thanks guys :) I'm still learning JavaScript and JQuery so I wasn't aware the issue was to do with the buttons being added dynamically but it makes sense now you mention it. I've managed to get the buttons working how they should. I really appreciate your help! – Tiffany Sep 03 '15 at 10:38

Next and Previous Buttons with JQuery

1 Answers1