JQuery:将单击事件绑定到不可单击的 HTML 元素

JQuery: Binding a click event to a non-clickable HTML element

本文关键字：单击 HTML 元素 绑定 事件 JQuery      更新时间：2023-09-26

我有多个具有同一类的div 元素。我正在尝试将单个单击事件绑定到每个事件。

<div class="tile">Tile1</div>
<div class="tile">Tile2</div>
<div class="tile">Tile3</div>
...
$(".tile").click(this.handleClick);
var handleClick = function () {
  console.log("inside handle click");
};

目前，点击事件不会触发，也不会发生任何反应。如果我将单击事件绑定到窗口而不是如下所示的".tile"，则单击事件可以很好地触发。

$(window).click(this.handleClick);

知道为什么我的问题是什么吗？

this在此

上下文中无法按预期工作。尝试

function handleClick() {
  console.log("inside handle click");
};
$(".tile").click(handleClick);

您不需要this关键字即可使用刚刚在同一范围内分配的变量和函数。

这在 JavaScript 中具有非常具体的含义。互联网上有很多关于这方面的文章。

这个问题可能与您对this的使用有关。

在您的特定示例中，您将this.handleClick绑定为处理程序，然后才将变量handleClick定义为函数 - 这是失败的两种方式。

首先，您需要忘记使用this，因为它不是必需的，并且可能不是指您认为它的作用。其次，要么使用函数定义，要么在使用函数声明之前移动函数声明：

$(".tile").click(handleClick);
function handleClick() { // handleClick is defined in the whole scope
  console.log("inside handle click");
};

或

var handleClick = function () { // handleClick is defined from this line forward (in this scope)
  console.log("inside handle click");
};
$(".tile").click(handleClick);

通过将 click 事件绑定到文档中的元素而不是元素本身来解决。

$(document).on("click", ".tile", this.handleClick);
相关文章：