Question

我有一个简单的点击处理程序，可以提醒其链接的href，如下所示：

<a id="link" href="http://www.google.com">Google</a>

$('a#link').on('click', function() {
  alert($(this).attr('href'));
});

如何分离函数（以及如何调用它）以便可以通过另一个单击处理程序调用它？

function showHref() {
  /* What to do here because $(this) won't resolve to <a> anymore. */
}

// I'd like a#another-link to be able to call that same function above.    
<a id="another-link" href="http://www.microsoft.com">Microsoft</a>

$('a#another-link').on('click', /* How to call showHref? */);

感谢。

Answer 1

你可以这样做：

function showHref() {
   alert($(this).attr('href'));
}

$('a#link').on('click', showHref);
$('a#another-link').on('click', showHref);

在此代码中，this 中的showHref将引用被点击的链接，因为jQuery确保被点击的链接是调用上下文（使用{您可能想要阅读的{1}}。但是，如果您要手动拨打.call()，showHref 不会引用您的链接。

如果你想要this的定义你可以手动调用，并通过jQuery绑定，那么最好将引用作为参数传递：

showHref

在这种情况下，你必须按如下方式调整你的听众：

function showHref(link) {
    alert($(link).attr('href'));
}

但也可以组合选择器：

$('a#link').on('click', function() {
    showHref(this);
});

Answer 2

您可以将函数逻辑放入这样的引用中：

var handler = function () {
    alert($(this).attr('href'));
};

然后您可以使用该引用初始化事件侦听器：

$('#link').on('click', handler);

当然，您可以重复使用它。

$('#some_other_link').on('click', handler);

或者在事件处理程序上下文之外调用它（如果你正在构建一个事件处理函数，这通常是没有意义的 - 但是通常可以使用lambdas来完成）。

handler();

但是如果你想在一个元素上触发事件，你应该调用相应的事件触发函数。

$('#link').click();
// or
$('#link').trigger('click');

Answer 3

您写道：

function showHref() {
  /* What to do here because $(this) won't resolve to <a> anymore. */
}

嗯，实际上，是的，它会的。这正是DOM事件以及使用jQuery注册的事件处理程序所做出的承诺。

FWIW，内容应该是：

alert(this.href)

实际上没有必要调用jQuery来获取元素的href属性。

单独的事件处理程序以实现可重用性

3 个答案: