2

第 1 页

<html>
<head>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
</head></head>
<body><div id="main"></div> </body>
<script>$('div[id=main]').load('page2.php')
$('span[id*=temp]').on('click',function(){
alert(this.id); }); //this block of code not working!!
</script>
</html>

第2页

<div>
<span id="temp">
this is demo
</span>
</div>

基本上我想在单击标签时在主 div 中再次加载 page2 但无法获取第一页中标签的 id，page1 的脚本不适用于第 2 页的项目或标签

4

2 回答 2

1

您正试图在 AJAX 调用之后立即绑定事件，因此该元素尚不存在。该调用是异步的，因此它不会停止代码执行以等待响应。

在内容加载后绑定元素，使用方法的success回调load：

$('div#main').load('page2.php', function(){
  $('span[id*=temp]').on('click', function(){
    alert(this.id);
  });
});

或使用委托将事件绑定到父元素：

$('div#main').load('page2.php');
$('div#main').on('click', 'span[id*=temp]', function(){
  alert(this.id);
});
于 2013-01-28T19:34:39.240 回答
0

因为您需要指定父选择器以考虑动态创建的元素。

例子：

$("#main").on('click', 'span[id*="temp"]', function() {alert('Handler is working!');})

这是一个很好的相关问题：jQuery 1.7 on() and off() methods for dynamic elements

于 2013-01-28T19:26:56.593 回答