jquery - 带有外部函数的 jQuery 事件处理

Question

我想运行一个简单的脚本，它将html元素添加到div.

我想多次调用这个函数，所以我使用了this关键字。

我的代码是：

function insert(element, html) {
    $( html ).appendTo( element );
}

$('#div').bind('click', insert(this,'<p>inserted text</p>'));

不知道怎么回事，谢谢。

Answer 1

jQuerybind期望第二个参数是 a function，但您传递的是函数的返回值（在您的情况下，因为它不返回任何内容）。insertundefined

你真正想要的是：

function insert(element, html)
      {
      $( html ).appendTo( element );
      }

$('#div').bind('click', function() { insert(this,'<p>inserted text</p>'); });

或者：

function insert(html)
      {
      return function() { $(html).appendTo(this); };
      }

$('#div').bind('click', insert('<p>inserted text</p>'));

Answer 2

$( html ).appendTo( $(element) );

Answer 3

问题是您没有将回调函数传递给bind，而是将调用该函数的结果传递给。显然，这不是您要在这里实现的目标，而且对于刚开始 jQuery 的开发人员来说，这是一个常见的错误。它是如此普遍，以至于他们甚至将其放入jQuery 基础知识中（请参阅回调和函数 > 带参数的回调）。顺便说一句，这是推荐阅读。

您需要传递一个在执行时调用的函数insert(this,'<p>inserted text</p>');。因此，这看起来像：

$('#div').bind('click', function() {
    insert(this, '<p>inserted text</p>');
});

事件处理程序因其this上下文而绑定到受影响的 DOM 元素，我相信这就是您在这里尝试做的事情。如果没有，您将需要this使用一些技巧（例如Function.prototype.bindor jQuery.proxy）“修复”事件处理程序的上下文。