Restart function after click action with jQuery

Question

I have some function which is look like this:

var live_search_list = $('.live_search_list ul'),
    active_search_element = live_search_list.find('li.active'),
    search_element = live_search_list.find('li'),
    jsPane = $('.jspPane'); 

$('.bottom_search').click(function(){
    if (!search_element.last().hasClass('active')) {
        active_search_element.removeClass('active');
        active_search_element.next('li').addClass('active');
        jsPane.animate({top:"-=95px"});
    }
});
$('.top_search').click(function(){
    if (!search_element.first().hasClass('active')) {
        active_search_element.removeClass('active');
        active_search_element.prev('li').addClass('active');
        jsPane.animate({top:"+=95px"});
    }
});

So, problems starts after the first click, I have only one action - this with animation. After first click function is not checking my condition again, and not changing, removing class active. How can I restart this function after every click on this buttons?

You want to [`stop()`](http://api.jquery.com/stop/) the animation? — epascarello, Jan 14 '13 at 13:45
I want to check my condition after every click, now after the first click everything is fine, but after it i have only animation action... — Lukas, Jan 14 '13 at 13:48
Are you sure that `search_element` and `active_search_element` are valid elements upon second and following clicks? +1 for what epascarello said - apart from anything - it's always good idea to stop() before starting animation again, otherwise, if user clicks several times in short intervals your animations will get queued and everything will be jumpy. — WTK, Jan 14 '13 at 13:58

score 1 · Answer 1 · answered Jan 14 '13 at 14:02

You are not setting active_search_element to the new active element!

The line:

active_search_element = live_search_list.find('li.active')

only selects the element at that time, it does not magically keep updating.

$('.bottom_search').click(function(){
    if (!search_element.last().hasClass('active')) {
        active_search_element.removeClass('active');
        active_search_element = active_search_element.next('li').addClass('active');
        jsPane.animate({top:"-=95px"});
    }
});

$('.top_search').click(function(){
    if (!search_element.first().hasClass('active')) {
        active_search_element.removeClass('active');
        active_search_element  = active_search_element.prev('li').addClass('active');
        jsPane.animate({top:"+=95px"});
    }
});

it works to, thx, i think also that is more flexible way for write it — Lukas, Jan 14 '13 at 14:11

score 1 · Accepted Answer · answered Jan 14 '13 at 14:02

After you make the next li the active class you need to recache it in active_search_element

var live_search_list = $('.live_search_list ul'),
    active_search_element = live_search_list.find('li.active'),
    search_element = live_search_list.find('li'),
    jsPane = $('.jspPane'); 

$('.bottom_search').click(function(){
    if (!search_element.last().hasClass('active')) {
        active_search_element.removeClass('active');
        active_search_element.next('li').addClass('active');
        active_search_element = live_search_list.find('li.active')
        jsPane.animate({top:"-=95px"});
    }
});
$('.top_search').click(function(){
    if (!search_element.first().hasClass('active')) {
        active_search_element.removeClass('active');
        active_search_element.prev('li').addClass('active');
        active_search_element = live_search_list.find('li.active')
        jsPane.animate({top:"+=95px"});
    }
});

ofcourse, now active class append to second element and stay with it forever, much thx for help, BR — Lukas, Jan 14 '13 at 14:08

Restart function after click action with jQuery

2 Answers2