jQuery on click requires two clicks before triggering function

Question

I have the following code which listens to a click on a.core-overlay, which then runs the overlay() function, which is part of jQueryTools.

The following works fine when the link is clicked and the function runs after only one click.

$("a.core-overlay").overlay({
    target:"div.global-overlay",
    mask: '#3D3D3D',
    api: true,
    onBeforeLoad: function() {
        var toDoID = this.getTrigger().attr("id");
        var toDo = toDoID.split('-');
        var objectAction = toDo[0];
        var objectType = toDo[1];
        var objectID = toDo[2];

        $('div.overlay-inner').load('/includes/functions/overlay-controls.php', {action: objectAction, type: objectType, object: objectID });
            }
    });
});

When I then put that in to an on click listener, it requires two clicks before it triggers the overlay function.

$(document).on('click', 'a.core-overlay', function(event) {
    $(this).overlay({
        target:"div.global-overlay",
        mask: '#3D3D3D',
        api: true,
        onBeforeLoad: function() {
            var toDoID = this.getTrigger().attr("id");
            var toDo = toDoID.split('-');
            var objectAction = toDo[0];
            var objectType = toDo[1];
            var objectID = toDo[2];

            $('div.overlay-inner').load('/includes/functions/overlay-controls.php', {action: objectAction, type: objectType, object: objectID });
        }
    });
});

I need it to trigger as a live event as I use ajax to insert rows in to a table, but when the link is clicked on one of these it wouldn't trigger at all with the first piece of code, but triggers after two clicks with the second. Any ideas? I've tried so many different things without any luck.

Answer 1

Try changing the overlay code inside your click handler to this:

$(this).overlay({
    target:"div.global-overlay",
    mask: '#3D3D3D',
    api: true,
    load: true,   
    onBeforeLoad: function() {
        var toDoID = this.getTrigger().attr("id");
        var toDo = toDoID.split('-');
        var objectAction = toDo[0];
        var objectType = toDo[1];
        var objectID = toDo[2];

        $('div.overlay-inner').load('/includes/functions/overlay-controls.php', {action: objectAction, type: objectType, object: objectID });
    }
});

Added load: true to make the overlay open immediately rather than waiting for the click.