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的等待事件的返回值

回答

相关问题