無法將事件綁定到動態創建的元素

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頁面的作用是，單擊“ adres”形式的“地址”按鈕，一些帖子數據被發送到另一個php頁面，該頁面在諸如div（其樣式為display：none）之類的彈出窗口中顯示基於已發送數據的信息fadeIn來自顯示：無。 用於此目的的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（））關閉（fadeOut）

為什么在這種情況下不發生這種情況？ 有人可以為我提供解決方案嗎？ 我正在提供一個演示頁面，您可以在其中實際看到問題。

1. 請訪問http://raddacentre.org/editstaff.php，並
2. 在“按名稱搜索”字段中輸入“ Afsar”，然后
3. 然后按“顯示”。
4. 頁面加載后，請按頁面底部的“地址”按鈕。
5. 然后將顯示一個彈出div，其中將有一個名為“ Close”的鏈接。
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”。