別のAjaxクリックイベントによって追加されたdivでAjaxクリックイベントを実行する

Question

何らかの理由で、まったく同じページの別のAjaxクリックイベントによって追加されたdivをAjaxクリックできません。

両方のajaxリクエストは同じリクエストページを使用しますが、異なるデータ文字列を含みます。

これら

は私の2つのAjax機能で

$(document).ready(function(){ 
    $('#log_login').click(function(event){ 
     event.preventDefault(); 
     var email=$("#log_email").val(); 
     var login=$("#log_login").html(); 
     var dataString = 'email='+email+'&login='+login; 
     $.ajax({ 
      type: 'POST', 
      url: '$language_rewrite/$administrator_login/forgotpassword', 
      data: dataString, 
      beforeSend: function(){ 
       $("#login-msg").hide(); 
       $("#log_login").html('$translate_login_8...'); 
      }, 
      success: function(html){ 
       if(html){ 
        if(html.indexOf("$forgot_translate_1") > -1){ 
         $("#p_log_email").html('$forgot_translate_1'); 
         $("#log_verify_code").html('<input id="log_code" type="text" name="email" placeholder="$admin_f_subject"/><br>'); 
         $("#log_verify_btn").html('<div id="log_verify" name="login" class="standard-button">$admin_verify_btn</div>'); 
        } 
       } 
      }, 
      error: function(jqXHR, textStatus, errorThrown){ 
       alert('error'); 
      } 
     }); 
    }); 
}); 
$(document).ready(function(){ 
    $('#log_verify').click(function(event){ 
     event.preventDefault(); 
     var code = $("#log_code").val(); 
     var verify = $("#log_verify").html(); 
     var dataStringTwo = 'code='+code+'&verify='+verify; 
     $.ajax({ 
      type: 'POST', 
      url: '$language_rewrite/$administrator_login/forgotpassword', 
      data: dataStringTwo, 
      beforeSend: function(){ 
       $("#login-msg").hide(); 
       $("#log_verify").html('$admin_verify_btn...'); 
      }, 
      success: function(html){ 
       if(html){ 
        if(html.indexOf("1") > -1){ 
         $("#log-verify").html('<div id="log_login2" name="login" class="standard-button">FINISHED</div>'); 
        } 
       } 
      }, 
      error: function(jqXHR, textStatus, errorThrown){ 
       alert('error'); 
      } 
     }); 
    }); 
}); 

これは

<div id="log_verify_code"> 
    <input id="log_email" type="text" name="email" placeholder="<?php echo $translate_login_2; ?>"/><br> 
     <input id="log_code" type="hidden" value=""/> 
</div> 
<div id="log_verify_btn"> 
    <div id="log_login" name="login" class="standard-button"><?php echo $translate_login_8; ?></div> 
    <input id="log_verify" type="hidden" value=""/> 
</div> 

最初のAjax機能が完璧に動作変更されているHTMLコードであり、それは、入力フィールドを変更しますしかし、2番目のボタンを押すと何も起こりません。エラーでも、PHPエラーでもありません。何もない。どうして？

Answer 1

イベントハンドラは、既存の要素にのみバインドされます。将来の要素については、委任されたイベントを使用して、既存の祖先、または例えばドキュメント自体にバインドする必要があります。

$(document).on("click", ".future-elem", function() { 
    // code here 
}); 

出典：$.on - read: direct and delegated events

EDIT：ちょうどこれはすでに