如何在jQuery的load回调函数中获取调用者元素$('#div')？

首先纠正你代码里的一个关键错误：$('#div').load('/foo.html', param, foo()) 里的 foo() 是立即执行函数，不会作为load完成后的回调触发，你应该传函数引用 foo 而不是执行结果。

接下来给你两种可靠的方法获取目标DOM元素：

方法一：利用回调的上下文（最简洁） #

jQuery的load回调函数中，this会指向触发load操作的DOM元素，也就是你要的$('#div')[0]，直接用就行：

var param = {
    a: 'haha'
}

// 注意这里传foo而不是foo()
$('#div').load('/foo.html', param, foo)

function foo() {
   var div = this; // 这里的div就是$('#div')[0]
   console.log(div);
}

方法二：显式传递元素（更灵活） #

如果需要更明确的控制，或者目标元素可能在回调触发前有变更，可以直接把元素作为参数传给回调：

var param = {
    a: 'haha'
}
var $targetDiv = $('#div');

$targetDiv.load('/foo.html', param, function() {
    // 这里可以直接用$targetDiv[0]，或者传给foo函数
    foo($targetDiv[0]);
})

function foo(targetElement) {
   var div = targetElement; // 拿到目标DOM元素
   console.log(div);
}

补充说明 #

如果你的#div元素会动态变更（比如被替换或重新渲染），方法一依然有效，因为load回调触发时，this绑定的是最初触发load操作的那个DOM元素；如果需要获取变更后的最新元素，在回调里重新执行$('#div')[0]即可。

内容的提问来源于stack exchange，提问作者Bana