Question

我正在用jQuery编写，并希望在单击某个元素时发生一些事情。我想调用的函数需要参数，并且必须始终监视事件，因此处理程序位于$（document）.ready（）中。这就是我的意思：

"use strict"
$(document).ready(function(){
    $("<button>").each(
        $(this).click(doSomething)
    );    
});
function doSomething(message){
    alert(message);
}

问题是doSomething需要一条可以提醒的消息。但是，我是否要将代码更改为：

$(document).ready(function(){
    $("<button>").each(
        $(this).click(doSomething("Hello world"))
    );    
});
function doSomething(message){
    alert(message);
}

然后在页面加载时会提示“Hello world”，并且单击按钮将不执行任何操作。如何保持第一种方式的行为，但是将方法传递给参数？

Answer 1

您需要传递一个匿名函数，然后使用所需的参数调用您的函数：

$(document).ready(function(){
    $("button").click(function() {
            doSomething("Hello world!");
        });
    );    
});
function doSomething(message){
    alert(message);
}

请注意，我修改了选择器，以便选择现有的<button>元素而不是创建新元素，并删除了不必要的.each()，因为.click()隐式迭代匹配的元素已经

Answer 2

试试这个：

  $("button").click(function(){
        doSomething("Hello world");
    });
    function doSomething(message){
        alert(message);
    }

Answer 3

您需要bind-function。这是ECMAScript的最新成员，如果不可用，您需要提供它：

if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      // closest thing possible to the ECMAScript 5 internal IsCallable function
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var aArgs = Array.prototype.slice.call(arguments, 1), 
        fToBind = this, 
        fNOP = function () {},
        fBound = function () {
          return fToBind.apply(this instanceof fNOP && oThis
                                 ? this
                                 : oThis,
                               aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();

    return fBound;
  };
}

查看此页面以获取参考：https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind

如果您包含此代码，则可以执行以下操作：

$(document).ready(function(){
    $("button").click(doSomething.bind("Hello world"));
});
function doSomething(message){
    alert(message);
}

Answer 4

您的代码中有很多错误，首先$("<button>")创建新的dom元素，然后选择现有的页面元素。关于这篇文章doSomething("Hello world") - 您正在立即评估代码，在Jquery中单击reference，您可以看到处理程序的数据必须作为第一个参数。这是正确的列表

$().ready(function(){
    $("button").each(
        $(this).click("Hello world",doSomething)
    );    
});
function doSomething(message){
    alert(message);
}

如何使用参数将函数附加到事件处理程序

4 个答案: