无法将事件绑定到动态创建的元素

Question

我在editstaff.php中有以下html结构：

<div id="result" style="display:none">This is result div</div>
<form id="adres" onsubmit="return submitForm();">
<input type="hidden" name="type" value="adrs" />
<input type="submit" value="Address" /></form>

内联样式：

#result{
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 190px;
} 

这个html页面做什么，点击“地址”表单的“地址”按钮，一些帖子数据被发送到另一个php页面，该页面根据发送的数据显示信息，如div（显示样式：无）从显示淡入：无。用于此目的的 javascript/jquery 代码如下：

<script>
function submitForm(){
  var data=$("#adres").serializeArray();
  /* alert(data); */
  data.push(
  {
    name:'sname',value:$("#title").val()
  }
  );
  $.post("geteditdata.php",data,
  function(data){
    $("#result").html(data);
    positionPopup();
    $("#result").fadeIn(1000);

  }
 )
return false;
}
function positionPopup(){
$("#result").css({
left: ($(window).width() - $('#result').width()) / 2,
top: ($(window).width() - $('#result').width()) / 2,
position:'absolute'
});
}

$("#divclose").live('click',function(){
$("#result").fadeOut(500);
});


</script>

例如，editstaff.php 中带有获取数据的 div 将弹出如下结构：

<div id="result">
some_value
<a href="#" id="divclose">Close</a>
</div>

到了这个阶段，一切都还好。但是，当我单击弹出 div 上的“关闭”链接时，div 没有关闭（淡出） $("#divclose").click(function()

为什么在这种情况下没有发生这种情况？ 任何人都可以为我提供解决方案吗？ 我正在提供一个演示页面，您可以在其中看到实际问题。

1. 请访问http://raddacentre.org/editstaff.php和
2. 在“按名称搜索”字段中写入“Afsar”并
3. 然后按“显示”。
4. 页面加载后，请按页面底部的“地址”按钮。
5. 然后将显示一个弹出 div，其中将有一个名为“关闭”的链接。
6. 按下那个按钮，请检查为什么这个 div 没有淡入其中？

当我使用 jquery 1.3 版时，我使用了 $("#divclose").live 方法而不是 $(selector).on 方法。 任何帮助将不胜感激。

在geteditdata.php中只有这段代码：

<?php
echo $_POST['sname'];
?>
<br /><br /><a href="#" id="divclose">Close Here</a>

Answer 1

您使用的是非常旧的 jQuery 1.2.3（不是 jq 1.3），我不确定该版本中是否存在 .live。所以两件事：

1. 使用新的 jQuery（我建议 1.9）
2. 使用 .on 而不是 .live（阅读一下，语法有点不同）

代码应该是这样的：

$("body").on('click', "#divclose", function(){
  $("#result").fadeOut(500);
});

您可以使用绑定事件时存在的其他容器来代替“body”。