jQuery 的 .on 函数似乎不喜欢 'load' 事件答案

【问题标题】：jQuery's .on function doesn't seem to like 'load' eventjQuery 的 .on 函数似乎不喜欢 'load' 事件
【发布时间】：2012-01-05 06:26:16
【问题描述】：

我有一个完全由 ajax 驱动的网站，所以最近我不得不研究委托技术。我了解到 .live 和 .delegate 已被弃用，要使用的新功能是 .on 。

如果我像这样动态地将网页加载到当前页面 (AJAX) 上的一个分区中：

<html>
<head>
<script src="jquery.js">
</script>
<script>
function ajaxTest()
{
    $('#content').load('test.php');
}
</script>
<script type="text/javascript">
$(function(){
    $(document).on("click", "#map", function(){
        alert("it has been loaded");
    });
});
</script>
</head>
<body>
    <div id="content">
        <button onClick="ajaxTest()" value="Click Me">
            This is to be clicked
        </button>
    </div>
</body>
</html>

test.php 的样子

<html>
  <head>
  </head>
  <body>
    <div id="map">THIS IS THE MAP</div>
  </body>
</html>

然后我可以单击“这是地图”字样，它确实显示了警报。我一直遇到的问题是：

$(document).on("**click**", "#map", function(){

我需要更多类似的东西：

$(document).on("**load**", "#map", function(){

它显然不起作用，所以我想知道是否有类似的东西。我什至询问此问题的全部原因是因为在某些页面中，我有一个谷歌地图或一个 swf 对象或其他东西，而不是在地图部门中只有“这是地图”。任何帮助将不胜感激。

如果您只想回答如何将谷歌地图加载到尚不存在的部门中，那也会有所帮助；）

【问题讨论】：

你试过了吗.bind("click","testfunc");

标签： javascript ajax delegates jquery

【解决方案1】：

只有一些事件会在父链中冒泡，并且可以在带有.on() 或.live() 或.delegate() 的父对象上使用。 .load() 不是那些冒泡的事件之一。

这是来自 jQuery 文档的部分事件列表：click、dblclick、keydown、keypress、keyup、mousedown、mousemove、mouseout、mouseover 和 mouseup。

来自doc page for .on()，引述如下：

在所有浏览器中，加载事件都不会冒泡。

在您的特定示例中，您可以将事件直接绑定到对象，如下所示：

$("#map").on("load", function(){});

或

$("#map").load(function(){});

当您像这样直接绑定到对象时，不需要冒泡，它将与加载事件一起使用。对象#map 需要在您绑定事件处理程序时存在，因为这种使用.on() 或.load() 的方法不能与将来创建的对象一起使用。创建对象后，必须将事件处理程序附加到对象。

【讨论】：

如果对象还没有创建，我们可以使用哪个代码？（我认为这是问题所在）。
@lijn - 正如我的回答所说，load 事件不会冒泡给父母，所以你不能在目标对象存在之前将它绑定到某个东西。创建对象后，您必须将其绑定到实际对象。

【解决方案2】：

如果您想在response 为loaded 时执行某项操作，您可以在加载时使用callback function，而不是在两个单独的脚本和事件绑定中执行此操作，例如

$('#content').load('test.php', function(){
alert("map is loaoded.")
});

reference

【讨论】：