Question

我有一个名为“创建项目”的按钮，当用户点击按钮时，我想要发生两件事

ajax调用以检查用户是否允许创建项目
如果允许，则正常执行按钮，否则，弹出模态对话框，说明不允许创建新项目。

我有以下代码

$('.create_project').click(function(e) {
   e.stopDefault();
   $.getJSON('/check_user_limit', function(data){
        if(data.allow_to_create_project){
           //trigger the click here
        }else{
           //modal here
        }
    }
});

在上面的代码中使用'trigger'将无法工作，因为它变成了无限循环。 unbind第一次工作，但是由于foo不再绑定到函数，所以第二次不会工作。

Answer 1

这很简单，您只需执行以下操作：

$('.foo').click(function(e) {
   $(this).href = "/bar"; # done something else before the click

   return true;
});

如果要拦截click事件而不传播它，则只需返回false。我注意到你让你的例子更明确，但解决方案仍然有些类似。我们手动触发点击，而不是返回true来传播事件，同时告诉click函数通过返回false来吞下事件。然后代码看起来像这样：

$('.create_project').click(function(e) {
   $.getJSON('/check_user_limit', function(data) {
        if (data.allow_to_create_project) {
           e.click();
        } else {
           //modal here
        }
   }
   return false;
});

但是，发出AJAX请求以验证功能是否可用通常不是一个好主意。如果服务器已经知道用户无法创建项目，那么为什么按钮可以在第一时间点击？改为使用适当的状态更新控件。

Answer 2

我不确定你为什么不愿意这样做：

$('.foo').click(function(e) {
    $(this).href = "/bar";
});

Answer 3

我有点困惑。您提到了解绑定，但实际代码中没有实际的解除绑定事件。

如果您只是尝试执行某些元素的代码预先单击，那么您将采用错误的方式。

$('.foo').click(function(e)
{
    $(this).href = "/bar";
    return true; // this is implicit, but you could return false to cancel the event
});

如果您正在尝试做其他事情，那么我会主张使用两个单独的事件，其中一个是自定义事件名称。

Answer 4

为什么要为此烦恼客户端代码？

从可用性角度来看，最好使用服务器端代码检查用户权限，如果出现问题，则在页面加载时在禁用按钮旁边显示一条消息。此消息还将提及可以为此用户启用项目创建的内容。

有时您只需要评估特定工具是否对实现目标是必要的。

如何使用一些自定义函数包装click事件

4 个答案: