2011-11-11 50 views
2

我试图用精美的方框实现确认对话框。我的JavaScript代码被安排到模块中。被调用前执行的回调

我已经成立了一个名为“实用程序”模块内部的确认对话框功能

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

在对话框甚至显示之前立即被触发,并且在确认对话框中单击确定时不会执行。 我做得不对?

+0

PLEASE在每行代码的末尾使用分号所以很显然,当一个结束,下开始。 – Blazemonger

回答

1

我不熟悉您使用的一切,但是你可能需要调用换到PheedModule.delete_pheed()在一个匿名函数:

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

工作就像一个魅力...非常感谢 – MrFoh

0

你必须在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()); 
});