Jquery Dialog问题

Question

为了使用jquery UI对话框模块使用$ .extend（）方法，我写了这个：

User.confirmationDialog = function(options)
{
  if(undefined === options.selector)
  {
      return false;
  }

  this.close = function()
  {
    modal.dialog('close');
  }

  this.forward = function()
  {
    if(undefined !== trigger.attr('href'))
    {
      document.location.href = trigger.attr('href');
    }
  }

  var modalButtons = {};
  if(undefined !== options.buttons)
  {
    for(var buttonTitle in options.buttons)
    {
      modalButtons[buttonTitle] = (function(e, f)
      {
        return function() {
          e.call(f);
        }
      })(options.buttons[buttonTitle], this);
    }
    delete options.buttons;
  }

  var modalHtmlElementId = 'confirmDialog';
  if(undefined !== options.id)
  {
    modalHtmlElementId = options.id;
    delete options.id;
  }

  var modalOptions = jQuery.extend({
    autoOpen: false,
    width: 410,
    height: 'auto',
    minHeight: false,
    dialogClass: 'modalDefault',
    modal: true,
    resizable: false,
    draggable: false,
    close: function()
    {
      bindTriggers();
    },
    open: function()
    {
      unbindTriggers();
    },
    buttons: modalButtons
  }, options || {});

  var modal = jQuery('<div />', {'id': modalHtmlElementId});
  if(undefined !== options.text)
  {
    modal.html(options.text);
  }
  modal.dialog(modalOptions);


  var trigger = null;
  var onTriggerClick = function(e)
  {
    e.preventDefault();
    trigger = jQuery(e.target);
    if(undefined !== options.beforeOpen)
    {
      options.beforeOpen.call(trigger, modal, e);
    }
    modal.dialog('open');
  };

  //bind custom event to current options.selector elements
  var bindTriggers = function()
  {
    jQuery(options.selector).live('click', onTriggerClick);
  }

  //unbind custom event to current options.selector elements
  var unbindTriggers = function()
  {
    jQuery(options.selector).die('click', onTriggerClick);
  }

  //First init: bind custom event listener on option.selector
  bindTriggers();
}

/*
*
* @required User.confirmationDialog
*/
User.singleBtnDialog = function (options)
{
  if(undefined === options.selector) return false;

  var text= options.text,
      ok = options.okBtnTxt,
      dialogButton = {};

  dialogButton[ok] = function()
  {
    this.forward();
  };

  var modalOptions = jQuery.extend({
    selector: options.selector,
    text : text,
    closeOnEscape: false,
    open: function(event, ui)
    {
      jQuery(".ui-dialog-titlebar-close").hide()
    },
    buttons: dialogButton
  }, options || {});
  User.confirmationDialog(modalOptions);
}

User.twoBtnDialog = function(options)
{
  if(undefined === options.selector) return false;

  var text= options.text,
      ok = options.okBtnTxt,
      cancel = options.cancelBtnTxt,
      dialogButtons = {};

  dialogButtons[ok] = function()
  {
    forward();
  };
  dialogButtons[cancel] = function()
  {
    close();
  };

  var modalOptions = jQuery.extend({
    selector: options.selector,
    text: text,
    buttons: dialogButtons
  }, options || {});
  User.confirmationDialog(modalOptions);
};

User.ajaxContentDialog = function(options)
{
  if(undefined === options.selector) return false;

  var modalOptions = jQuery.extend({
    selector: options.selector,
    beforeOpen: function(modal, e)
    {
      e.stopPropagation();
      jQuery.ajax({
         async: false,
         type: 'GET',
         url: this.attr('href'),
         success: function(data, textStatus, XMLHttpRequest)
         {
          modal.html(data);
         }
      });
    }
  }, options || {});
  User.confirmationDialog(modalOptions);
};

前端，我实际上以这种方式绑定了3种方法中的任何一种（singbutton，2buttons或ajax）：

 [User.singleBtnDialog, {
      okBtnTxt: 'Ok',
      text: 'blablablablabl',
      selector: '.addToFav'}],

    [User.twoBtnDialog, {
      okBtnTxt: 'Ok',
      cancelBtnTxt: 'Ablehnen',
      text: 'blablablablabl',
      selector: '.topicOpenClose'}],

我的问题很简单，但似乎无法轻易解决： 事件在我的每个选择器上都很好地绑定，按钮被正确创建，但是，当点击“确定”按钮时，我得到了一个

trigger is null
[Break On This Error] if(undefined !== trigger.attr('href')) 

错误。我怀疑有一些范围误解，但似乎无法找到正确的解决方案。

感谢您的帮助，非常感谢。

Answer 1

是的，这是一个范围问题。尝试使用User.confirmationDialog.forward();来调用它。如果这不起作用，请将该功能公之于众。

编辑：您应该将函数转换为具有函数的对象，并仅调用这些函数。

User.confirmationDialog = {

 recent_function: function(options){
   // do ...
 }

 close: function()
  {
    alert('close');
  }
  ...
}

调用User.confirmationDialog.recent_function将运行以前的函数confirmationDialog。 您可以使用User.confirmationDialog.close();

立即关闭