Question

我有一个Javascript函数，在点击按钮时，一个帖子请求将被发送到另一个文件。如果此请求成功，则该按钮将被禁用并且其颜色会发生变化。系统也会返回提醒。

$(document).on("click", ".employeeComplete", employeeReg);

    function employeeReg(self, name){
        self = $(self);
        var stats   = {};
        stats['age']  = 'age';
        stats['name'] = name;
        $.post('employee', stats)
        .done(function(e){
            alert("hello");
            if(e){
                alert("This employee has been registered.");
                self.attr('disabled', 'disabled');
                self.css('background-color', '#111111');

            }
            else{
                alert("Error.");
            }
        })
        .fail(function(){
            alert("Error.");
        });

        self.attr("disabled", "disabled");
    }

在第一行中，我之前在我的函数名称之后有了parantheses：

$(document).on("click", ".employeeComplete", employeeReg());

但是在页面加载时触发了该功能，而不是点击按钮。删除括号后，该功能根本不适用于按钮单击或页面加载。感谢。

修改

我的sselector拼写错误，但唯一的警报是返回，没有按钮更改或禁用。

当我将self更改为this或$(this)时（还从函数中删除了self变量和参数），我收到以下控制台错误：

Uncaught TypeError: Illegal invocation

Answer 1

事件回调的第一个（通常也是唯一的）参数是事件数据本身。这是由浏览器JS引擎完成的，不是你可以影响或选择自己的东西。

要在回调上下文中点击项目，您始终可以引用this。

参见下面的示例（为了制作一个可运行的演示，我已经注释掉了ajax部分，目的是为了演示this）的正确用法。

$(document).on("click", ".employeeComplete", employeeReg);

function employeeReg(event) {
  var self = $(this);
  var stats = {};
  stats['age'] = 'age';
  stats['name'] = name;
  /*        $.post('employee', stats)
          .done(function(e){
              alert("hello");
              if(e){
                  alert("This employee has been registered.");
                  self.attr('disabled', 'disabled');
                  self.css('background-color', '#111111');

              }
              else{
                  alert("Error.");
              }
          })
          .fail(function(){
              alert("Error.");
          });*/

  alert("This employee has been registered.");
  self.css('background-color', '#111111');
  self.attr("disabled", "disabled");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="employeeComplete">Click to test</button>

N.B。还要考虑将“.attr”切换为“。prop” - 请参阅overview documentation处的文档，其中指出：“从jQuery 1.6开始，.attr（）方法为尚未设置的属性返回undefined。要检索和更改DOM属性（如表单元素的选中，选中或禁用状态）使用.prop（）方法。“ 。还有一个更详细的讨论，为什么会这样。

Javascript函数在点击时不触发

1 个答案: