FancyboxのJavascript/Jqueryコールバック

Question

私は空想を実装しようとしています。いいえ確認し、必要に応じてコールバックを取得するのに問題があります。以下の例はFancybox v2を使用しています。

#fancyConfirm_okをクリックしたときにHREF "テスト"がクリックされ、呼び出されていないときに関数 "do_something"が呼び出されているという問題があります。

function fancyConfirm(msg,callback) { 
    var ret; 
    jQuery.fancybox({ 
     'modal' : true, 
     'content' : "<div style=\"margin:1px;width:240px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input id=\"fancyconfirm_cancel\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Cancel\"><input id=\"fancyConfirm_ok\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Ok\"></div></div>", 
     'afterShow' : function() { 
      jQuery("#fancyconfirm_cancel").click(function() { 
       ret = false; 
       //jQuery.fancybox.close(); 
       $.fancybox.close(); 
      }) 
      jQuery("#fancyConfirm_ok").click(function() { 
       ret = true; 
       jQuery.fancybox.close(); 
      }) 
     }, 
     'afterClose' : function() { 
      if (typeof callback == 'function'){ 
       callback.call(this, ret); 
      } else { 
       var callback_type = typeof callback; 
       alert(callback_type); 
      } 
     } 
    }); 
} 
<a href="#" onclick="fancyConfirm('Are you sure you want to delete?', do_something('a', 'b'));return false;">Test</a> 

Answer 1

ユーザーがリンクをクリックすると、返された結果が「fancyConfirm」方法の2番目のパラメータとして渡されるたびに、「（ 『A』、 『B』）をdo_something」あなたの方法が実行されます。このため、パラメータ "コールバック"は常に "未定義"です。

fancyBoxにも問題があります。「afterClose」コールバックは、開く前と閉じる後に2回呼び出されます（これは次のリリースで変更されます）。

私は、リンクをクリックしてイベントをバインドし、ユーザーがいずれかのボタンをクリックしたときにコールバックを呼び出して、希望の - http://jsfiddle.net/xcJFY/1/

Answer 2

ない二重のコールバックメソッド（Sorry Janis）の大ファン。

私はこのようなコードで解決策を見つけようとしていましたが、戻り値が関数のスコープ内で定義されていない限り、戻り値が関数内で定義されていれば私は奇妙な振る舞いをして、それが一度はうまくいき、未定義に戻ってしまうだろう。 Google Groups FancyBox forum上postだFrancisco Diazへ

効果的な戻り値は、関数の範囲外である必要があり、グローバル、閉鎖などここで

$(document).ready(function() { 
    $(".fancybox").on("click", function(e){ 
     e.preventDefault(); 
     confirm("Do you wish to continue?", true, function(resp) { 
      alert("You clicked " + resp); 
     }); 
    }); 
}); 

function confirm(msg, modal, callback) { 
    $.fancybox("#confirm",{ 
     modal: modal, 
     beforeShow: function() { 
      $(".title").html(msg); 
     }, 
     afterShow: function() { 
      $(".confirm").on("click", function(event){ 
       if($(event.target).is(".yes")){ 
        ret = true; 
       } else if ($(event.target).is(".no")){ 
        ret = false; 
       } 
       $.fancybox.close(); 
      }); 
     }, 
     afterClose: function() { 
      callback.call(this, ret); 
     } 
    }); 
} 

がjsfiddle例です

感謝正しい方向に私を指摘した。

UPDATE：あなただけの真と偽に限定されるものではないので、

は今、動的に構築されたボタンやカスタムの戻り値を使用するように私の例を高めています。

$(document).ready(function() { 
    $(".fancybox").on("click", function(e){ 
     e.preventDefault(); 
     confirm("Do you wish to continue?", { 
       /* 
       Define your buttons here, can handle multiple buttons 
       with custom title and values 
       */ 
       buttons: [ 
        { class: "yes", type: "button", title: "Yes", value: "yes" }, 
        { class: "no", type: "button", title: "No", value: "no" }, 
        { class: "maybe", type: "button", title: "Maybe?", value: "maybe" } 
       ], 
       modal: true 
      }, 
      function(resp) { 
       alert("You clicked " + resp); 
      } 
     ); 
    }); 
}); 

function confirm(msg, options, callback) { 
    $.fancybox("#confirm",{ 
     modal: options.modal, 
     beforeShow: function() { 
      this.content.prepend("<p class=\"title\"></p>"); 
      $(".title").html(msg); 

      for (i = 0; i < options.buttons.length; i++) { 
       this.content.append($("<input>", { 
        type: "button", class: "confirm " + options.buttons[i].class, 
        value: options.buttons[i].title 
        }).data("index", i)); 
      } 
     }, 
     afterShow: function() { 
      $(".confirm").on("click", function(event){ 
       ret = options.buttons[$(event.target).data("index")].value; 
       $.fancybox.close(); 
      }); 
     }, 
     afterClose: function() { 
      this.content.html(""); 
      callback.call(this, ret); 
     } 
    }); 
} 

追加jsfiddle例