Question

考虑以下jsFiddle：http://jsfiddle.net/JtN9W/4/

<div id= 'MyDiv'>screamer</div>

jQuery.fn.scream = function() {
   if(this.hasClass("scream")) {
      alert("scream");
   }
   else {
      alert("shhhh");
   }
}
$(function () {
   $('#MyDiv').scream();
   $('#MyDiv').on( "click", scream);
});

我试图将div的click事件绑定到'this'对象上的JQuery函数。我知道我可以通过更改函数并将对象作为变量来执行此操作，但我希望保持函数签名不变并让它在内部处理'this'对象。我如何实现这一目标？

Answer 1

您没有scream函数，但您拥有的是jQuery.fn.scream函数，因为您已将其附加到该命名空间。

您当然可以将该函数用作事件处理程序中的引用，但是this中传递的元素将是本机DOM元素，并且必须包装在jQuery中。

为什么你会这样做，这是超出我的，但这里是：

jQuery.fn.scream = function() {
   if( $(this).hasClass("scream") ) {
      alert("scream");
   }
   else {
      alert("shhhh");
   }
}
$(function () {
   $('#MyDiv').scream();
   $('#MyDiv').on( "click", jQuery.fn.scream);
});

FIDDLE

Answer 2

fn属性是jQuery对象的原型，用于向jQuery添加插件。

你当然可以向原型添加一个函数，然后将其用作事件的回调，但这不是意图，通常你会使用常规函数。

请注意，使用对元素的引用调用事件处理程序，而不是包含该元素的jQuery对象，因此您需要使用$(this)在元素上使用jQuery方法：

function scream() {
  if($(this).hasClass("scream")) {
    alert("scream");
  } else {
    alert("shhhh");
  }
}

$(function () {
  $('#MyDiv').on( "click", scream);
});

如果你想制作一个插件，实现通常看起来像这样：

jQuery.fn.scream = function() {
  return this.click(function() {
    if($(this).hasClass("scream")) {
      alert("scream");
    } else {
      alert("shhhh");
    }
  });
}

$(function () {
   $('#MyDiv').scream();
});

Answer 3

将this更改为$(this)，jQuery就可以使用它。

Answer 4

您有以下代码

$('#MyDiv').on( "click", scream);

但是当前范围中没有定义scream函数，而是jQuery.fn.scream。此外，hasClass是jQuery方法，您需要使用$(this).hasClass("scream")而不是this.hasClass("scream")，因为this不是jQuery对象，而是{ {1}}是$(this)对象。

DEMO.

在jQuery.on中使用对'this'进行操作的函数（调用

4 个答案: