Question

我有一个完全由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对象或其他东西。任何帮助将不胜感激。

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

Answer 1

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

这是jQuery doc冒出的事件的部分列表：click，dblclick，keydown，keypress，keyup，mousedown，mousemove，mouseout，mouseover和mouseup。

来自doc page for .on()，这是一个引用：

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

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

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

或

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

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

Answer 2

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

之类的东西

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

reference

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

2 个答案: