Question

这是我的情况。我正在一个新闻网站上工作，主页上包含最新的100篇新闻文章。客户希望访问者能够通过对话框对新闻发表评论。这是文章标题后面的链接。此外，当访问者未登录时，他们可以通过对话框执行此操作，当访问者没有帐户时，他可以注册该帐户。

我使用的对话框来自jquery ui。布局如下：

|---------------------------------------|
| Login           |  Registration       |
|                 |                     |
| username:       |  username:          |
| - Inputfield    |  - Inputfield       |
| password:       |  password           |
| - Inputfield    |  - Inputfield       |
| remember me     |  password confirm   |
| login button    |  - Inputfield       |
|                 |  email:             |
|                 |  - Inputfield       |
|                 |  register button    |
|---------------------------------------|
|                                       |
| Here will be all the comments for the |
| news article from newest to oldest    |
|---------------------------------------|

我在这里做的事情就是创造3个div。

在登录表单和注册表单中创建一个包装器div。
在登录表单
在注册表单中创建一个div

html看起来像这样:(内容是荷兰语，我留下了评论。）

<div class="reactionForm" >
<div id="normalReaction" class="normalReaction activeForm'.(check_login() ? '' : ' login').'">
    <form action="" name="plaatsreactie" onsubmit="return validateReaction( '.$_POST['id'].');" method="post">
        <div id="reactionForm">

            <div class="qr_login">
                <h3>Log hieronder in.</h3>
                <form action="" method="post" id="reactie_login" >

                    Gebruikersnaam:<br />
                    <input id="r_username" type="text" name="gebruikersnaam" class="r_loginInput" value="" /><br />
                    Wachtwoord:<br />
                    <input id="r_password" type="password" name="wachtwoord" class="r_loginInput" value="" /><br />
                    <input id="r_onthouden" type="checkbox" name="onthouden" value="1" class="customCheckbox" id="onthoudenCheck" />
                    <label for="onthoudenCheck">Onthouden</label><br />
                    <span class="r_login_option"><a href="/wachtwoord-vergeten/" title="Wachtwoord vergeten?">Vergeten?</a>
                    <input type="image" name="submit" id="r_login" src="/images/inloggen.png" class="loginSubmit" />

                </form>
            </div>
            <div class="qr_register">
                 <h3>Nog geen account? <br />Maak hieronder een account aan.</h3>

                <form action="" method="post" id="reactie_register" >

                    Gebruikersnaam:<br />
                    <input id="r_r_username" type="text" name="gebruikersnaam" class="r_loginInput" value=""  /><br />
                    Wachtwoord:<br />
                    <input id="r_r_password" type="password" name="wachtwoord" class="r_loginInput" value="" /><br />
                    Bevestig wachtwoord:<br />
                    <input id="r_r_password2" type="password" name="wachtwoord2" class="r_loginInput" value="" /><br />
                    Email adres:<br />
                    <input id="r_r_email" type="text" name="emailadres" class="r_loginInput" value="" /><br />
                    <input id="r_r_voorwaarden" type="checkbox" name="voorwaarden" class="register_checkbox"/> Ik accepteer de <a href="/algemene-voorwaarden/" target="_blank">algemene voorwaarden</a>
                    <input type="image" name="submit" id="r_register" src="/images/registreren.png" class="loginSubmit" />

                </form>
            </div>

        </div>
    </form>
</div>

然后当我按下登录按钮时会出现以下代码：

$("#r_login").live("click",function() { 

    var unameval = $('#r_username').val();
    var pwordval = $('#r_password').val();
    var onthoude = $('#r_onthouden').val();

    $.post( "/ajax/login.php", { gebruikersnaam: unameval, wachtwoord: pwordval, onthouden: onthoude },
    function(data){
        $('#reactionForm').html(data);            
    });
    check_login();

    return false;
});

并且寄存器与一些额外的变量相同：

$("#r_register").live("click",function() { 

    var unameval = $('#r_r_username').val();
    var pwordval = $('#r_r_password').val();
    var pword2val = $('#r_r_password2').val();  
    var email = $('#r_r_email').val();
    var chkbox = $('#r_r_voorwaarden:checked');
    if(chkbox.length > 0){
        var voorwaarden = 'on';    
    }else{
        var voorwaarden = 'off';
    }


    $.post( "/ajax/register.php", { gebruikersnaam: unameval, wachtwoord: pwordval, wachtwoord2: pword2val,  emailadres: email, voorwaarden: voorwaarden },
        function(data){
            $('#reactionForm').html('');
            $('#reactionForm').html(data);            
        }
    );

    return false;
});

我上面给出的关于对话框的html布局的代码是当登录或注册数据错误时将返回的代码，并且只会为某些红色警告添加一些跨度。

但是，不是用新的内容替换当前内容（使用跨度），而是替换在线的一半内容。

然后布局看起来像这样。

|---------------------------------------|
| login button    |                     |
|                 |                     |
|         Registration                  |
|         username:                     |
|         - Inputfield                  |
|         password                      |
|         - Inputfield                  |
|         password confirm              |
|         - Inputfield                  |
|         email:                        |
|         - Inputfield                  |
|         register button               |
|---------------------------------------|
|                                       |
| Here will be all the comments for the |
| news article from newest to oldest    |
|---------------------------------------|

登录表单几乎消失了，只有按钮仍在那里，注册表单在它下面。

我不知道你们的言论是否足以让我们回答这个问题，但我无法解决这个问题。

此致

编辑 - ＆GT;问题解决了 问题是HTML中没有关闭的范围。

<label for="onthoudenCheck">Onthouden</label><br />
    <span class="r_login_option"><a href="/wachtwoord-vergeten/" title="Wachtwoord vergeten?">Vergeten?</a>
    <input type="image" name="submit" id="r_login" src="/images/inloggen.png" class="loginSubmit" />

使用类r_login_option查看范围，它永远不会关闭。

无论如何都要回答已经给出的答案。

Answer 1

1）您无法嵌套FORM元素。 2）您的DIV和FORM元素最后没有以正确的顺序关闭。

首先解决这两件事情，它们应该开始神奇地工作。

jquery html没有替换IE中的当前html

1 个答案: