ajax call + fadeIn（）后提交无响应

Question

美好的一天，其他程序员。

这个 index.php 执行对 login.php 的Ajax调用，并将DOM元素和一些javascript从其中添加到索引的主体中。此login.php包含一个 div ，其中包含表单和提交按钮，只要全部为fadeIn（）追加。

但是：提交按钮没有响应！

我确实发现，当您直接通过URL（... / ... / login.php）访问login.php时，这种情况不会发生。这意味着索引附加了整体，这使得它们没有响应。

（另外：鉴于此，我添加了一个$（文件）.ready（function（）{...}）;在login.php的整个脚本周围，但似乎没有帮助完全相反，它导致所有函数返回错误......）

我没有想法。也许你们中的一些人可能对这些事情有过任何经验？

一如既往，谢谢您的时间！

这是（简化）代码：

的index.php

$('#logInButton').click(function(){
    loadContent('/login/login.php', 'body');
});

loadContent（）;

function loadContent(url, appendDiv, optionalData, cb) {
    if (appendDiv == '#contentCenter') {
        // vanity code
    }
    if (cb) {
        $.ajax({
            url: url,
            cache: false,
            type: 'post',
            data: optionalData,
            success: function(html){
                $(appendDiv).append(html);
            },
            complete: function(){
                cb();
            }
        });
    }
    else {
        $.ajax({
            url: url,
            cache: false,
            type: 'post',
            data: optionalData,
            success: function(html){
                $(appendDiv).append(html);
            }
        });
    }
}

login.php （删除了一些样式。如果你想要一些特定的信息，请问！）

<style>
    // some styling
</style>

<div id="loginBlack">
        <div class="login" style="z-index:9999;">
                <form id="myform1" name="myform1">
                    <div>
                        <img src="images/inputEmail.png" /> 
                        <div id="emailOverlay">
                            <input id="email" type="text"/>
                        </div>
                    </div>
                    <input id="iets" name="iets" type="submit"/>
                </form>
        </div>
</div>

<script type="text/javascript">
    // $(document).ready(function(){   // <-- been trying this out.
        $('#loginBlack').fadeIn(t)
        // some functions pertaining to logging in and registering
    // });
</script>

Answer 1

使用jquery on()代替click（）

$('body').on('click', '#logInButton' ,function(){
    loadContent('/login/login.php', 'body');
});

这应该使元素表现正常

注意：你也可以用更靠近点击按钮（最近的父母）的东西替换身体选择器

修改::

使用此功能，您可以在普通的css文件中使用样式。把它放在login.php之外

你的js进入了成功的处理程序。所以只需将php与实际的html

保持一致

function loadContent(url, appendDiv, optionalData, cb) {
if (appendDiv == '#contentCenter') {
    // vanity code
}
if (cb) {
    $.ajax({
        url: url,
        cache: false,
        type: 'post',
        data: optionalData,
        success: function(html){
            $(html).hide().appendTo(appendDiv).fadeIn('slow');
        },
        complete: function(){
            cb();
        }
    });
}
else {
    $.ajax({
        url: url,
        cache: false,
        type: 'post',
        data: optionalData,
        success: function(html){
            $(html).hide().appendTo(appendDiv).fadeIn('slow');
        }
    });
}
}