在花式框之前顯示確認框

Question

我有一個有任務的客戶的應用程序。 要為客戶創建新任務，可以單擊添加圖標，這會打開一個顯示新任務表單的花式框。 它具有以下咖啡腳本：

jQuery ->
  $("a.fancyForm").fancybox
  scrolling: "no"
  titleShow: false

但是，客戶還必須有一個朝着這個目標努力的目標，否則這些任務是迫在眉睫的。 因此，關系確實是客戶有很多目標，有很多任務。 如果客戶已經有一些目標，那么表格會簡單地詢問您它要朝哪個目標發展。 如果客戶沒有目標，那么我想彈出一個確認框，詢問用戶是否現在要制定目標。 這是我目前擁有的咖啡腳本：

$("a.noGoals").click (e) ->
  e.preventDefault()
  confirm_create_goal = confirm("There is currently no Goal for this customer. Would you like to create one?")
  if confirm_create_goal
    $("a.noGoals").fancybox()
  else
    alert "You won't be able to create tasks until a goal is created!"

單擊確定將彈出確認框，似乎什么也沒做。 如果您再次嘗試，它將顯示確認框，如果單擊確定或取消，則將顯示帶有新目標表的正確的花式框。 我如何使它在第一輪工作？ 似乎對於ok的第一次單擊，它只會設置Confirm_create_goal，然后僅在第二次嘗試時打開fancybox。

如果我在第一次嘗試上單擊“取消”，它將正確顯示警報。 第二次嘗試，我沒有擊中“確定”。 第三次嘗試單擊“確定”得到fancybox，但是如果我單擊“取消”，我得到警報，然后獲得fancybox oO

Answer 1

fancybox（）應該在頁面加載時調用，而不應響應click事件。 調用fancybox（）只會創建fancybox並附加偵聽器等。它只是對其進行配置。 它沒有顯示。

這是我不使用fancybox的原因之一，因為它的API很爛。 沒有手動顯示它的方法。 除非您使用的是fancybox2。這是一個可能如何工作的示例：

http://jsfiddle.net/9wAdV/1/

Answer 2

因此，事實證明，如上所述調用fancybox只是將其附加到click事件，而不是調用它。 因此，當您再次單擊時，無論您的確認框響應如何，它都會顯示現在連接到click事件的花式框。

我的解決方案雖然不確定是否是最好的，但是使用.on（）和.off（）來綁定和取消綁定確認框，然后我可以在$（“ a.noGoals”）。fancybox（）之后觸發fancybox。呼叫：

confirm_create_goal = (e) ->
  e.preventDefault()
  confirm_create = confirm("There is currently no Goal for " + $(this).data("customer") + "'s company, " + $(this).data("company") + ". Would you like to create one?")
  if confirm_create
    $("body").off "click", "a.noGoals", confirm_create_goal
    $("a.noGoals").fancybox(onClosed: ->
      $("body").on "click", "a.noGoals", ->
        alert "Create a Goal!"
    ).trigger "click"
  else
    alert "You won't be able to create tasks until a goal is created!"

$("body").on "click", "a.noGoals", confirm_create_goal

因此，函數Confirm_create_goal會彈出一個確認框，如果您單擊“取消”，並且單擊“確定”，則會發出警報，它會自動從鏈接中解除綁定，添加fancybox並觸發鏈接上的click事件。 這將打開花式框，並且所有內容都會正確顯示。 最后，我添加了一個警報以綁定到鏈接（以防用戶關閉框並嘗試執行任務），以提醒他們創建目標。