jquery ui 对话框 - 按钮单击事件处理程序答案

【问题标题】：jquery ui dialog - button click event handlersjquery ui 对话框 - 按钮单击事件处理程序
【发布时间】：2010-02-02 21:20:40
【问题描述】：

我是 js 菜鸟。我正在使用 jquery FullCalendar 插件，它公开了一个 eventClick(calEvent, jsEvent, view) 事件，当您单击日历上的事件时会调用该事件。在我的事件处理程序中，我想弹出一个对话框，询问用户是否只想编辑重复事件的一个事件或整个事件。问题是该对话框的按钮单击处理程序需要访问 calEvent 变量，但我必须在 $(document).ready 但在 eventClick 函数之外实例化对话框。

到目前为止，这是我的代码：

$(document).ready(function() {
  $('#calendar').fullCalendar({
    events: getEvents,
    header: {
      left: 'title',
      center: 'prev,next',
      right: 'today month agendaWeek agendaDay'
    },
    theme: true,
    eventClick: function(calEvent, jsEvent, view) {
      if(calEvent.readOnly == true) {
        return;
      }
      if(calEvent.recurring) {
        if(calEvent.persisted) {
          editOccurrence(calEvent);
        } else {
          $("#edit_type_dialog").dialog("open");
        }
      } else {
        editEvent(calEvent);
      }
    }
  });

  $("#edit_type_dialog").dialog({
    modal:true,
    autoOpen: false,
    buttons: {
      All:function() {
        $(this).dialog("close");
        editEvent(calEvent);
      },
      This:function() {
        $(this).dialog("close");
        editOccurrence(calEvent);
      },
      Cancel:function() {
        $(this).dialog("close");
      }
    }
  });

  function getEvents(start, end, callback) {
    //get some events
  }

  function editEvent(calEvent) {
    alert("event edited");
  }

  function editOccurrence(calEvent) {
    alert("occurrence edited"); 
  }
});

所以问题归结为：如何从 eventClick 函数将 calEvent 转移到 edit_type_dialog 中的按钮单击事件处理程序？

【问题讨论】：

标签： javascript jquery jquery-ui dialog scope

【解决方案1】：

这是我所做的（不确定是否值得推荐，但它有效）：

1) 将对话框实例移动到 eventClick 方法中，从而使其能够访问 calEvent 变量。 2) 在 fullCalendar 实例化之外，但仍在 $(document).ready() 我添加了 $("#edit_type_dialog").hide()

【讨论】：