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");
};

目前，点击事件不会触发，也没有任何反应。如果我将click事件绑定到窗口而不是像下面的“.tile”那样，则click事件会很好地触发。

$(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);

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

3 个答案: