Question

我编写了一个用作确认框的功能：

$.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，甚至不会等待on事件。

如何强制JQuery等待用户点击？

Answer 1

您不能“等待”该事件返回。您需要将附加参数传递给将成为回调的函数：

$.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 {
        //...
    }
});

Answer 2

它没有返回false，它返回undefined，因为你的return语句实际上是在事件发生时执行的匿名函数，而不是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. 
});

Answer 3

您应修改确认功能，以便针对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
});

Answer 4

在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();
        }
    });
};

Jquery等待事件返回值

4 个答案: