1

我写了一个函数用作确认框：

$.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 等待用户点击？

4

4 回答 4

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 {
        //...
    }
});
于 2013-10-15T12:48:59.050 回答
1

它不是正在返回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. 
});
于 2013-10-15T12:49:49.917 回答
1

您应该修改您的确认函数以对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-15T12:50:48.893 回答
1

在 jQuery 中复制确认或提示框必须使用回调。由于对话框不能像本机.confirm()and那样阻塞调用.prompt()，因此它们不能返回值。

让您的消费者通过 asureCallback和 a 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-15T12:50:58.333 回答