Question

出于某种原因，我无法在完全由同一页面上的另一个ajax点击事件添加的div上运行Ajax点击。

两个ajax请求都使用相同的请求页面，但包含不同的数据字符串。

这是我的两个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');
            }
        });
    });
});

这是正在更改的HTML代码

<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函数工作正常，它会改变输入字段，但是当我按下第二个按钮时没有任何反应。甚至没有错误或PHP错误。没有。怎么样？

Answer 1

事件处理程序仅绑定到现有元素。对于将来的元素，您必须使用委托事件并绑定到现有祖先，或者绑定到文档本身。

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

来源：$.on - read: direct and delegated events

编辑：刚看到这个已被评论

在由另一个Ajax单击事件添加的div上运行Ajax单击事件

1 个答案: