javascript - JQuery：将单击事件绑定到不可单击的 HTML 元素

Question

我有多个具有相同类的 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);

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

Answer 1

this在这种情况下不能按您预期的那样工作。尝试

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

$(".tile").click(handleClick);

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

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

Answer 2

该问题可能与您对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);

Answer 3

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

$(document).on("click", ".tile", this.handleClick);