Question

我试图用精美的盒子实现确认对话框。我的javascript代码被安排到模块中。

我在名为“Utility”的模块中设置了确认对话框功能

var Utility = (function() {
    function confirm_dialog(title,msg,callback)
        {
            var html = '<div class="confirm-box">'+
                       '<div class="confirm-title">'+title+'</div>'+
                       '<div class="confirm-msg">'+msg+'</div>'+
                       '<div class="confirm-buttons">'+
                       '<button class="okBtn">Ok</button>'+
                       '<button class="cancelBtn">Cancel</button>'+
                       '</div>'+
                       '</div>';
            var ret;
            $.fancybox('<div class="confirm-dialog"></div>',
            {
                'width':400,
                'height':250,
                'content':html,
                'modal' : true,
                'transitionIn' : 'none',
                'transitionOut': 'none',
                'speedIn' : 300,
                'speedOut' : 300,
                'autoScale' : false,
                'scrolling' : 'no',
                'overlayShow' : true,
                'overlayOpacity' : 0.3,
                'overlayColor' : '#666',
                'padding':10,
                'onComplete':function() {
                    $('.okBtn').click(function(){
                            ret = true;
                            $.fancybox.close();
                        })
                    $('.cancelBtn').click(function() {
                        ret = false;
                        $.fancybox.close();
                    })
                },
                onClosed : function() {
                     if (typeof callback == 'function'){ callback.call(this, ret); } }
            });
        }
        return { dialog : confirm_dialog }
})();

这是触发对话框的事件处理程序

$('a.deletePheed').click(function(e) {
                            var id = $(this).parent('div.pheed-holder').attr('data-id');
                        Utility.dialog('Delete Pheed','Are sure you want to delete this pheed ?',
                        PheedModule.delete_pheed());
                            e.preventDefault();
                        });

单击事件处理程序后，在对话框显示之前立即触发回调，而在确认对话框中单击确定时则不执行回调。我做得不好？

Answer 1

我不熟悉您正在使用的所有内容，但您可能需要在匿名函数中将调用包装到PheedModule.delete_pheed()：

Utility.dialog('Delete Pheed','Are sure you want to delete this pheed ?', function() {
    PheedModule.delete_pheed();
});

Answer 2

您必须将e.preventDefault（）移动到方法的顶部。 http://api.jquery.com/event.preventDefault/

$('a.deletePheed').click(function(e) {
   e.preventDefault();
   var id = $(this).parent('div.pheed-holder').attr('data-id');
   Utility.dialog('Delete Pheed','Are sure you want to delete this pheed ?',
   PheedModule.delete_pheed());
});

在被调用之前执行回调

2 个答案: