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

问题描述

跟进这个问题，我正在尝试实现一个不显眼的确认对话框.

$(document).ready(function () {$("[data-confirmPrompt]").click(function (event) {var confirmPrompt = event.currentTarget.attributes['data-confirmPrompt'].value;event.preventDefault();$.prompt(confirmPrompt, {按钮:{是:真，否:假}，回调:函数(v，m，f){如果(五){//用户点击是.解除绑定处理程序以避免//递归，然后再次点击目标元素$(event.currentTarget).unbind('click');event.currentTarget.click();}}});});});

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

是否有替代的通用方法来执行默认操作?逻辑上类似于 event.executeDefault().

解决方案

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

注意事项:

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

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

<input type='submit' data-confirm="确定删除客户 123?".../><a href="..." data-confirm="可以导航吗?".../><!-- 实现--><script type="text/javascript">var confirmClickHandler = 函数(事件){if ($(event.currentTarget).data('isConfirming')) 返回；var message = event.currentTarget.attributes['data-confirm'].value;event.preventDefault();$('
').html(消息).对话({title: "确认",纽扣: {是":函数(){$(this).dialog("close");$(event.currentTarget).data('isConfirming', true);event.currentTarget.click();$(event.currentTarget).data('isConfirming', null);},否":函数(){$(this).dialog("close");}},模态:真，可调整大小:假，closeOnEscape: 真});};$(document).ready(function () {$("body").delegate("[data-confirm]", "click", confirmClickHandler);});

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

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().

解决方案

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.

Notes:

• I'm now using a jqueryUI dialog widget
• Note the use of .delegate so that the handler is "ajax-aware", i.e. works on elements added to the DOM after the page is loaded, e.g. as a result of an AJAX call
• Uses a flag to prevent recursion when the user clicks Yes on the confirm dialog.
• Uses jquery 1.6.4 and 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屋！