jQuery的等待事件的返回值

我寫了一個確認框使用功能：jQuery的等待事件的返回值

$.fn.confirmation = function(message, color) { 

     $('.notification').css("background", color); 
     $('.notification').html(message + "<br/><a href='#' id='sure'>I am sure</a> or <a href='#cancel' id='cancel'>Cancel</a>"); 
     $('.notification').slideDown(); 

     $(document).on("click", '.notification a', function(event){ 

     if($(this).attr("id") == "sure") { 

      $('.notification').slideUp(); 

      return true; 

     } else if($(this).attr("id") == "cancel") { 

      $('.notification').slideUp(); 

      return false; 
     } 

     }); 

    };

我的問題是，它會始終返回false，它甚至不等待事件。

我該如何強制JQuery等待用戶點擊？

來源

2013-10-15 Sam Pettersson

爲什麼你要返回？不要使用'return'，使用'event.preventDefault'或'event.stopPropagation'。你是否在螢火蟲中使用任何中斷點來計算流量？ 'return false'表示上面的2，可能不會是你想要的。 – JorgeeFG

@Jorge如果用戶點擊true或false來執行操作，我是否在函數外部檢查？ –

它不會返回false，它會返回未定義的（因爲'if'語句的目的是同一件事情），因爲'$ .fn.confirmation'函數中沒有'return'語句。你不能強制這個函數等到用戶點擊，因爲你最終會鎖定窗口。 –

它沒有返回false，它的返回undefined，因爲你的回報聲明實際上在事件發生時執行的匿名函數中，而不是在confirmation函數中。解決這個問題最簡單的方法（在我看來）使用deferred對象：

$.fn.confirmation = function (message, color) { 

    $('.notification').css("background", color); 
    $('.notification').html(message + "<br/><a href='#' id='sure'>I am sure</a> or <a href='#cancel' id='cancel'>Cancel</a>"); 
    $('.notification').slideDown(); 

    var def = $.Deferred(); 

    $(document).on("click", '.notification a', function (event) { 

     if ($(this).attr("id") == "sure") { 

      $('.notification').slideUp(); 

      def.resolve(true); 

     } else if ($(this).attr("id") == "cancel") { 

      $('.notification').slideUp(); 

      def.resolve(false); 
     } 

    }); 

    return def.promise(); 
}; 


$.confirmation('message', 'red').done(function(result) { 
    // result is true or false. 
});

來源

2013-10-15 12:49:49

您不能「等待」事件返回。你需要傳遞額外的參數給你的函數，這將是一個回調：

$.fn.confirmation = function(message, color, callback) { 
    //... 
    $(document).on("click", '.notification a', function(event){ 
     if($(this).attr("id") == "sure") { 
      $('.notification').slideUp(); 
      if (typeof callback === "function") 
       callback(true); 
     } else if($(this).attr("id") == "cancel") { 
      $('.notification').slideUp(); 
      if (typeof callback === "function") 
       callback(false); 
     } 
    }); 
}

，並使用它：

$.confirmation("hello", "red", function(success) { 
    if (success) { 
     //... 
    } else { 
     //... 
    } 
});

來源

2013-10-15 12:48:59

您應修改您的確認功能採取的true和false場景回調。

$.fn.confirmation = function(message, color, okCallback, cancelCallback) { 
    $('.notification').css("background", color); 
    $('.notification').html(message + "<br/><a href='#' id='sure'>I am sure</a> or <a href='#cancel' id='cancel'>Cancel</a>"); 
    $('.notification').slideDown(); 

    $(document).on("click", '.notification a', function(event){ 

     if($(this).attr("id") == "sure") { 

     $('.notification').slideUp(); 

     okCallback(); 

    } else if($(this).attr("id") == "cancel") { 

     $('.notification').slideUp(); 

     cancelCallback(); 
    } 

    });   
}

然後，當你調用函數創建匿名回調做你想做什麼：

$('#whatever').confirmation('...', '...', function() { 
    //do 'OK' stuff 
}, function() { 
    //do 'Cancel' stuff 
});

來源

2013-10-15 12:50:48 ach

複製或確認提示框jQuery中必須使用回調。由於對話框不能阻止像本機.confirm()和.prompt()這樣的調用，因此它們不能返回值。

讓您的消費者通過sureCallback和cancelCallback，然後在用戶選擇選項時執行它們。我還推薦使用settings對象代替多個參數：

$.fn.confirmation = function (settings) { 
    settings = $.extend({ 
     message: 'default message', 
     color: 'default color', 
     sureCallback: $.noop, 
     cancelCallback: $.noop 
    }, settings || {}); 

    $('.notification') 
     .css("background", settings.color) 
     .html(settings.message + "<br/><a href='#' id='sure'>I am sure</a> or <a href='#cancel' id='cancel'>Cancel</a>") 
     .slideDown(); 

    $(document).on("click", '.notification a', function() { 
     $('.notification').slideUp(); 

     if (this.id === "sure") { 
      settings.sureCallback(); 
     } else { 
      settings.cancelCallback(); 
     } 
    }); 
};

來源

2013-10-15 12:50:58 jbabey

jQuery的等待事件的返回值

回答

相關問題