Question

I currently have the following event handler:

$('#mainc').on("click", "ul.sort_ul li, ul.cat_items li", leftsort_click);

This then calls the leftsort_click function which starts like this:

function leftsort_click(event) {
     if (!$(this).hasClass('sort_cat')) {
     ....

All this works very well, the trouble is I am now calling this left sort click function from all over the shop and I need some way of knowing where it is being called from.

My approach is to add a class of just_clicked to the element which is triggering the function.

So for example my next page click event calls leftsort_click like this:

$('body').on("click", ".next_link", function(event) {
    event.preventDefault();
    if (!$(this).hasClass('disabled')) {
        var active_rps=$('.res_page_select.active a').html().trim();
        var new_rps =  parseInt(active_rps)+1;
        var new_rps_div = 'page_select_'+new_rps;
        $('#'+new_rps_div).addClass('just_clicked');
        var active_page = $('ul.sort_ul li.active, ul.cat_items li.active').attr('id');
        $('#'+ active_page).trigger('click');
    }
  });

Now to the problem, how can I call my function from the first event handler whilst retaining my reference (this) to the clicked element. So that I can do something like this:

$('#mainc').on("click", "ul.sort_ul li, ul.cat_items li", function(event){
    $(this).addClass('just_clicked');
    leftsort_click(this);
    });

when I do the above my reference to this (clicked element) is lost.

Answer 1

Try this:

$('#mainc').on("click", "ul.sort_ul li, ul.cat_items li", function(event){
    $(this).addClass('just_clicked');
    leftsort_click.call(this);
});