php - 動的に作成された要素にイベントをバインドできません

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」フォームの「Address」ボタンをクリックすると、投稿データの一部が別の 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)

この場合、なぜこれが起こらないのですか？誰かが私に解決策を与えることができますか? 問題を実際に確認できるデモページを提供しています。

http://raddacentre.org/editstaff.phpにアクセスして、
「名前で検索」フィールドに「Afsar」と入力し、
次に「表示」を押します。
ページが読み込まれたら、ページの下部にある「アドレス」ボタンを押してください。
次に、「閉じる」という名前のリンクがある場所にポップアップ div が表示されます。
そのボタンを押して、この div がそこにフェードインしない理由を確認してください。

jquery バージョン 1.3 を使用していたので、$(selector).on メソッドの代わりに $("#divclose").live メソッドを使用しました。どんな助けでも大歓迎です。

geteditdata.php には、次のコードのみがあります。

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

php - 動的に作成された要素にイベントをバインドできません

1 に答える 1

Related

Reference