jQuery on click 需要两次点击才能触发功能

Question

我有下面的代码来监听a.core-overlay 的点击，然后运行overlay() 函数，它是jQueryTools 的一部分。

点击链接后以下功能正常运行，只需单击一次即可运行。

$("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 });
            }
    });
});

当我将其放入 on click 监听器时，它需要点击两次才能触发覆盖功能。

$(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 });
        }
    });
});

我需要它作为实时事件触发，因为我使用 ajax 将行插入到表中，但是当单击其中一个链接时，第一段代码根本不会触发，但会触发在第二次点击两次后。有任何想法吗？我尝试了很多不同的东西，但没有任何运气。

Answer 1

尝试将点击处理程序中的覆盖代码更改为：

$(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 });
    }
});

添加了load: true，使叠加层立即打开，而不是等待点击。