jquery on()数据参数-$(this)指的是整个文档

Question

在使用jquery时，我经常在事件、函数等中使用$(this)。

最近我尝试了以下内容：

function btn_edit_click (event) {
    alert(event.data.idnum);
}
$(".btn_edit").on("click", { idnum: $(this).attr("title") }, btn_edit_click);

出于某种原因，我得到了整个页面的标题，而不是$(".btn_edit")引用的元素。我是做错了什么，还是这是意料之中的行为？

Answer 1

这取决于这个代码嵌套在什么里面。如果答案为零，则this引用window对象。

如果您在事件处理程序中引用this，那么this将引用事件触发的元素。但它看起来就像是在全局空间中使用this。

如果您想在回调函数中访问.btn_edit元素的标题，只需参考回调函数中的this即可（注意它如何简化代码）：

function btn_edit_click (event) {
    alert(this.title);
    //UPDATE: I changed $(this).attr('title') to this.title because it performs much faster
}
$(".btn_edit").on("click", btn_edit_click);

下面是一个演示：http://jsfiddle.net/gRK3z/

这里还有一个性能测试来显示使用.attr('title')和.title之间的差异：http://jsperf.com/jquery-attr-title-vs-title

Answer 2

$(this)是在全局范围内调用的，而不是在回调方法内。因此，是的，您应该期望用$(this)取回窗口或文档对象。

更好的解决方案可能是：

<script type="text/javascript">
function btn_edit_click (event) {
    alert(event.data.idnum);
}
$('.btn_edit').each(function(k, el)
{
    $(el).on('click', { idnum: $(el).attr('title') }, btn_edit_click);
});
</script>

Answer 3

正如其他人所指出的，this的上下文并不是您所期望的。我认为这是一种不那么复杂、更可读的方式来做你想做的事情：

$("#parentDiv").delegate(".btn_edit", "click", function (e) {
    btn_edit_click(this.title);
});

Answer 4

在您的例子中，您将一个对象传递给on函数，因此this是您所在范围中的任何对象。

除非设置，否则this通常设置为window。

Answer 5

当您创建一个对象来传递数据时，它不在选择器的范围内。相反，您可以简单地传递要在处理程序中执行的函数的名称。

然后，函数中的this将与选择器中指定的元素相关，从而省去了首先传递对象的需要：

function btn_edit_click (event) {
    alert($(this).attr("title"));
}
$(".btn_edit").on("click", btn_edit_click);

小提琴示例