Question

I have a function that I use as a callback for a custom event:

function checkNCreateTb() {
        var tbName = $(this).attr('href').replace('content','orders')
        /*...*/
}

I used .on() to handle the event that will callback that function

$('#group-pills a').on('shown', checkNCreateTb)

I need to apply the same function the first time the user clicks a button in another part of the DOM. I solved it attaching a click event to the button and triggering the shown event. However, I think this looks very ugly, Is there a better way to get the same result?

The code:

$('button#action-button').on('click',function() {
    $('#group-pills a:first').trigger('shown')
    $(this).off('shown') //removing the handler
})

//Create the DataTable if it wasn't already created
$('#group-pills a').on('shown', checkNCreateTb)

Answer 1

I would use $.proxy to create a function reference with this set to a particular value:

$("#action-button").on("click", $.proxy(checkNCreateTb, $("#group-pills a:first")));

Or, alternatively, use call to set the value of this in checkNCreateTb:

$('#action-button').on('click',function() {
    checkNCreateTb.call($("#group-pills a:first"));
});

As a side note, you do not need to prefix your #id selector with a tag name, since id is as specific as you can get and jQuery will use document.getElementbyId under the hood.