从
this 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()。
解决方法
使用Alexey Lebedev在他的第二个评论中提出的建议,我现在的实现看起来像下面的示例,除了我还添加了我自己的按钮标签的本地化实现。
笔记:
>我正在使用jqueryUI对话窗口小部件
>注意使用.delegate,以便处理程序是“ajax感知”,即在加载页面之后添加到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>