如何从jQuery事件显式执行默认操作

Question

从这个问题开始,我正在尝试实现一个不引人注意的确认对话框.

$(document).ready(function () {
    $("[data-confirmPrompt]").click(function (event) {
        var confirmPrompt = event.currentTarget.attributes['data-confirmPrompt'].value;
        event.preventDefault();
        $.prompt(confirmPrompt, {
            buttons: { Yes: true, No: false },
            callback: function (v, m, f) {
                if (v) {
                    // User clicked Yes.  Unbind handler to avoid
                    // recursion, then click the target element again
                    $(event.currentTarget).unbind('click');
                    event.currentTarget.click();
                }
            }
        });
    });
});

当用户单击"是"时,我希望执行与事件关联的默认操作.我已经通过解绑jQuery处理程序并再次单击该元素完成了上述操作.这在提交表单或导航到不同页面时工作正常 - 但当然在支持AJAX的页面中不起作用,我想保留jQuery事件处理程序.

是否有其他通用方法来执行默认操作？逻辑上像event.executeDefault().

Answer 1

使用Alexey Lebedev在他的第二条评论中提出的建议,我现在的实现现在看起来像下面的示例,除了我还为按钮标签添加了我自己的本地化实现.

笔记:

• 我现在正在使用jqueryUI对话框小部件
• 注意使用.delegate以便处理程序是"ajax-aware",即在页面加载后添加到DOM的元素上工作,例如,作为AJAX调用的结果
• 当用户在确认对话框上单击"是"时,使用标志来防止递归.
• 使用jquery 1.6.4和jquery-ui-1.8.16

如果有人可以提出改进建议,请加入.

<!-- Examples of usage -->
<input type='submit' data-confirm="OK to delete customer 123?" ... />
<a href="..." data-confirm="OK to navigate?" ... />

<!-- Implementation -->
<script type="text/javascript">
    var confirmClickHandler = function (event) {
        if ($(event.currentTarget).data('isConfirming')) return;
        var message = event.currentTarget.attributes['data-confirm'].value;
        event.preventDefault();
        $('<div></div>')
                .html(message)
                .dialog({
                    title: "Confirm",
                    buttons: {
                        "Yes": function () {
                            $(this).dialog("close");
                            $(event.currentTarget).data('isConfirming', true);
                            event.currentTarget.click();
                            $(event.currentTarget).data('isConfirming', null);
                        },
                        "No": function () {
                            $(this).dialog("close");
                        }
                    },
                    modal: true,
                    resizable: false,
                    closeOnEscape: true
                });
    };

    $(document).ready(function () {
        $("body").delegate("[data-confirm]", "click", confirmClickHandler);
    });
</script>