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

出于某种原因，我获得了整个页面的标题，而不是元素(s) 由 $(".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);

小提琴示例