Question

使用jQuery我想将现有函数绑定到按钮。我已经浏览了文档并找到了bind方法，但是jQuery上的示例绑定了新创建的函数，因为我想绑定一个已经硬编码的函数，例如：

function fHardCodedFunction(){
   //Do stuff
}

function fBindFunctionToElement(){
   $("#MyButton").bind("click", fHardCodedFunction());
}

这可能吗？或者我是以错误的方式解决这个问题？

Answer 1

普通fHardCodedFunction已引用该函数，后缀()将仅调用它。所以只需传递函数而不是调用它，从而只传递返回值：

function fBindFunctionToElement(){
   $("#MyButton").bind("click", fHardCodedFunction);
}

Answer 2

借用其他帖子，您可以按如下方式参数化您的事件处理程序：

function fHardCodedFunction(someValue) {
  alert(this.id + " - " + someValue);
}


function fBindFunctionToElement() {
  var someValue = "whatever";
  $("#MyButton").bind("click", 
       function() {
         fHardCodedFunction.apply(this, [someValue]);
       }
  );
}


$(document).ready
(
  function() {
    fBindFunctionToElement();
  }
);

我在这里使用apply，因为在函数fHardCodedFunction中我希望this属性引用MyButton元素。另请注意，apply需要第二个参数的数组，这就是我将someValue括在括号中的原因。

您不必这样做，如果您愿意，可以完全忘记这个this属性。

Answer 3

是的，你可以绑定写在其他地方的方法，但是你应该忽略括号：

function fHardCodedFunction(){
   //Do stuff
}

function fBindFunctionToElement(){
   $("#MyButton").bind("click", fHardCodedFunction);
}

Answer 4

由于此答案带有事件处理标签，因此我认为谈论事件也很有用。正如其他人所说，您的直接问题只是使用定义的功能function，而不是调用function()。括号表示要调用该函数，而您正在尝试指定要使用的函数。

那么，您如何处理事件？您只需要将其定义为函数的第一个参数...

function fHardCodedFunction(event){
    console.log(event);
}

function fBindFunctionToElement(){
    $("#MyButton").bind("click", fHardCodedFunction);
}

api.jquery.com documentation for bind()的含义也一样。我还整理了very small, working demo，以演示事件处理。

HTML ...

<input type="text" id="text">
<div id="main">Results appear here.</div>

JavaScript ...

function clickFunction(e) { return $('#main').html(e.which); }
$('#text').bind('keypress', clickFunction);

在jQuery中绑定现有的JavaScript函数

4 个答案: