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

Question

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

4

我有一个完全由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>

我可以点击“THIS IS THE MAP”这个词，确实会显示警报。我遇到的问题是，没有执行以下操作：

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

我需要更多与以下内容相关的东西：

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

显然这不起作用，所以我想知道是否有类似的东西。我之所以询问这个问题，是因为在某些页面中，地图区域不仅仅是“THIS IS THE MAP”，还可能是谷歌地图或swf对象等。非常感谢您的帮助。

如果您只是想回答如何将谷歌地图加载到尚不存在的区域中，那也会很有帮助 ;)

- Galway

你尝试过使用 .bind("click","testfunc") 吗？ - Rashmi Kant Shrivastwa

2个回答

1

如果你想在 response 加载时做一些操作，可以使用 load 中的 callback 函数，而不是在两个单独的脚本和事件绑定中进行操作，类似这样：

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

参考资料

- dku.rajkumar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jfriend00 · Accepted Answer

只有一些事件会冒泡到父级，并可以使用.on()、.live()或.delegate()在父对象上使用。 .load() 不是其中的一个冒泡事件。

以下是从jQuery文档中冒泡的事件的部分列表: click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover 和 mouseup。

从 .on() 文档页面中，引用如下：

在所有浏览器中，load 事件不会冒泡。

在您特定的示例中，您可以将事件直接绑定到对象，像这样：

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

或者

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

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