0

各位程序员，美好的一天。

这个index.php对login.php进行 Ajax 调用，并将 DOM 元素和其中的一些 javascript 附加到索引的正文中。这个 login.php 由一个单独的div组成，其中包含一个表单和一个提交按钮，一旦全部附加，就会出现 fadeIn()。

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

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

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

我没主意了。也许你们中的一些人可能对这些问题有任何经验？

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

这是（简化的）代码：

索引.php

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

加载内容（）；

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>
4

1 回答 1

0

使用 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');
        }
    });
}
}
于 2013-10-19T13:13:48.257 回答