jQuery event.PreventDefault doesn't work in user defined function

code

$('.leagues-link.league-table').on('click', displaySportsWidget('http://www.example01.com'));

Call displaySportsWidget and pass its return value into in exactly the same way as onyou foo(bar()) call bar and pass its return value into foo.

If you want to hook up an event handler, don't call it, just reference it. In your case you can do this:

$('.leagues-link.league-table').on('click', function(e) {
    displaySportsWidget(e, 'http://www.example01.com');
});

Or, if you prefer to change the order of the following parameters displaySportsWidget:

function displaySportsWidget(iFrameURL, event) {
    // ...
}

...then you can use Function#bind:

$('.leagues-link.league-table').on('click', displaySportsWidget.bind(null, 'http://www.example01.com'));

Function#bindCreate a new function that, when called, calls the original function with the given thisvalue (in our case we don't need any specific function , so I'm passing it null) and bindall the arguments you give, then the given of any parameter binding functions. So we will get the URL (from the bindcall) and the event object (from the time the handler was called).

Function#bindNot really old browsers (eg IE8). If you need to support them, jQuery does something $.proxylike this:

$('.leagues-link.league-table').on('click', $.proxy(displaySportsWidget, null, 'http://www.example01.com'));