JQuery How to activate a button when clicked

Question

I have pagination buttons like this:

<div style="float: right;" id="editable_paginate" class="dataTables_paginate paging_simple_numbers">
    <ul class="pagination">
        <li id="editable_previous" class="js_paginate_button previous disabled"><a href="#">Précédent</a></li>
        <li class="js_paginate_button active"><a href="#">1</a></li>
        <li class="js_paginate_button "><a href="#">2</a></li>
        <li class="js_paginate_button "><a href="#">3</a></li>
        <li class="js_paginate_button "><a href="#">4</a></li>
        <li class="js_paginate_button "><a href="#">5</a></li>
        <li id="editable_next" class="js_paginate_button next"><a href="#">Suivant</a></li>
    </ul>
 </div>

By default, the first button has 'active' class. When I click the 2nd button, for example, I need to activate that button and de-activate the first button. I have implemented the function below, but $(this).addClass('active'); is not working.

View.PharmaciesView = Marionette.CompositeView.extend({
    events : {
        "click li.js_paginate_button":"paginate"
    },
    paginate : function(e) {
        $('li.js_paginate_button').removeClass('active');
        $(this).addClass('active');
        e.preventDefault(); 
    }
});

What is wrong in my code?

Answer 1

this in paginate method is instance of View.PharmaciesView. To get button element use construction:

$(e.target).addClass('active');