リフレッシュ後のJquery/PHPの動作が異なります

Question

jqueryのajax経由でコメントを投稿できるページがあります。これらのコメントは編集することもできます。問題は、コメントを入力して「編集」をクリックするとjqueryが実行されないことです（理想的にはモーダルがポップアップするはずです）。コメントを入力すると、が更新され、[編集]をクリックすると、jqueryが完全に実行されます。私はかなり長い間自分自身をデバッグしようとしていましたが、なぜリフレッシュが違いになるのか分かりません。

JQUERY:

//this part takes the comment and enters it into a mysql database and 
//then appends the comments div to write the new comment. This code works. 
$('#answerCommentTextarea').keypress(function(e) { 
if(e.which == 13) 
{ 
    if ($.trim($(this).val()) == "") 
    { 
     $('#nocomment').modal('show'); 
    } 
} 
else 
{   
    var comment = $('#answerCommentTextarea').val(); 
    $.post('../writeanswercomment.php' , 
     { 
      comment: comment , 
      user: <?php echo $_SESSION['id']; ?>, 
      questionid: <?php echo $_GET['q']; ?>}, 
      function(response) 
      {    
       $('#answerCommentContainer').append(response); 
       $('#answerCommentTextarea').val(''); 
      } 
     }); 
} 

これはwriteanswercomment.phpの出力です。これは悪いコードです。ここで編集ボタンをクリックすると、下のJqueryが実行されません。 #がURL

echo "<div class='singleComment'> 
<b> 
    <a href='../profile.php?p=$user'>$name</a> 
</b>". 
$comment." 
<input type='hidden' value='$qid' name='hiddenComment' class='hiddenComment' /> 
<a href='#' style='color: orange;' class='editComment'><b>Edit</b></a> 
<div class='commentBar'>Just now</div> 
</div>"; 

に表示されたとしてもpreventDefault() doesntの仕事だからでリフレッシュした後に動作しますが、コメントは任意のリフレッシュなしで入力して編集されたときに動作しませんJqueryです。

$('.editComment').click(function(e) 
{ 
    e.preventDefault(); 
    var s_comment = $(this).prev('.hiddenComment').attr('value'); 
    $.post('../editcomment.php' , {comment: s_comment} , function(response) 
    { 
     $('#modalEditComment').val(response); 
     $('#editCommentModal').modal('show'); 
    });   
}); 

コメントはjQueryのAJAXを介して入力されていない場合、それが以前にデータベースに入力して保存しました。これは、コメントがすでに入力されたときに実行されるコードです。 （これは良いコードです。編集ボタンをクリックすると、上記のJqueryが完全に実行されます）。

echo "<div class='singleComment'> 
<b><a href='/profile.php?p=".$comment_user[$a]."'>".$name[$a]."</a></b>". 
$comment[$a]". 
<input type='hidden' value='".$comment_id[$a]."' name='hiddenComment' 
class='hiddenComment'/>"; 
$current_time=time(); 
if ($_SESSION['id'] == $comment_user[$a] && $current_time - $comment_time[$a] <60) 
{ 
    echo " <a href='#' style='color: orange;' class='editComment'><b>Edit</b></a>"; 
$periods = array(
      "second", "minute", "hour", "day", "week", "month", "year", "decade"); 
$lengths = array("60","60","24","7","4.35","12","10"); 
$now = time(); 
$difference  = $now - $comment_time[$a]; 
$tense   = "ago"; 
for($j = 0; $difference >= $lengths[$j] && $j < count($lengths)-1; $j++) 
    { 
    $difference /= $lengths[$j]; 
} 
$difference = round($difference); 

    if($difference != 1) 
    { 
    $periods[$j].= "s"; 
} 

    echo "<div class='commentBar'>".$difference." ".$periods[$j]."ago</div> 
</div>"; 

Answer 1

あなたは（ライブ使用する必要はありません）あなたのkeypressイベントを添付します。 ここで、ページに動的に追加されたコンテンツに委任されたイベントハンドラをアタッチする必要があります。 live（）、delegate（）、またはon（）を使用できます。しかし、あなたが見ることができます：

jQuery 1.7では、.live（）メソッドは非難されました。イベントハンドラを添付するには、.on（）〜 を使用します。古いバージョンのjQueryを使用する場合は、.live（）より優先して .delegate（）を使用する必要があります。 ^[source]

だから、あなたが使用することができます。

$("#answerCommentContainer").on("click", ".editComment", function(){ 
    //your code here 
}); 

---

編集：

イベントハンドラはのみ、現在選択された要素にバインドされています。コードが.on（）を呼び出すときに、ページに が存在していなければなりません。

委任イベントには、後でドキュメントに追加される 子孫エレメントのイベントを処理できるという利点があります。 委任イベントハンドラがアタッチされているときに存在することが保証されている要素を選択すると、委任されたイベントを に頻繁にアタッチして削除する必要がなくなります。ここで^[source]

、あなたは、この要素#answerCommentContainerにあなたのAJAXの応答は、ウィッヒは、「委任イベントハンドラが装着された時点で存在することが保証される」追加。だから私はそれを使ってクリックイベントをバインドします。任意の要素を（ドキュメントとして）バインドできますが、必要でないときにイベントがバブリングするのを防ぐため、通常は親の親を選択します。

Answer 2

多分、live（）機能を使用して、キー押しとイベントをクリックしてみてください。

$('#answerCommentTextarea').live('keypress', function(e) { 
... 
    if(e.keyCode == 13){ 
... 
} 

と

$('.editComment').live('click', function(e){ 
... 
} 

私はこれが問題であれば、それを試してみるかわからない）