如何从jQuery事件中显式执行默认操作 [英] How do I explicitly execute default action from jQuery event

问题描述

从此问题，我试图实现一个不引人注目的确认对话框。

Following up from this question, I'm trying to implement an unobtrusive confirm dialog.

$(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事件处理程序。

When the user has clicked on "Yes", I want the default action associated with the event to execute. I've done it above by unbinding the jQuery handler, and clicking the element again. This works fine when submitting a form or navigating to a different page - but of course does not work in AJAX-enabled pages, where I want to keep the jQuery event handler.

是否有替代的通用方式来执行默认动作？

Is there an alternative generic way to execute the default action? Logically something like event.executeDefault().

推荐答案

使用建议Alexey Lebedev在他的第二个评论中说，我现在的实现现在看起来像下面的示例，除了我还添加了我自己的按钮标签的本地化实现。

Using the suggestion Alexey Lebedev made in his second comment, my current implementation now looks like the sample below, except that I've also added my own implementation of localization for the button labels.

注意：

• 我正在使用jqueryUI对话框小部件
• 
  
• 注意使用.delegate，以便处理程序是ajax感知，即在加载页面之后添加到DOM中的元素，例如作为AJAX调用的结果


• 当用户在确认对话框中单击是时，使用标志来防止递归。


• 使用jquery 1.6.4和jquery-ui-1.8.16

如果有人可以建议改进，请在

If anyone can suggest improvements, please chime in.

<!-- 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>

这篇关于如何从jQuery事件中显式执行默认操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！