更新不同元素后元素内容消失

Question

当我点击一个框时，更新不同元素的内容后，单击框的标题会消失。知道为什么吗？点击框的内容应保持不变。

http://jsfiddle.net/wdQ6j/1/

HTML

<div id="school_left_box">
    <p class="register_title">School</p>This is a box
</div>

<div id="representative_left_box">
    <p class="register_title">Representative</p>This is a box
</div>

<p class="register_title form">Hello</p>

JQUERY

$(document).ready(function()
{
    $("#school_left_box").click(function()
    {
        var title = $(".register_title", this);

        $("#hidden_registration_type").html('School');
        $(".register_title.form").html(title);
        $("#register_right_box").fadeIn(300);
    });

    $("#representative_left_box").click(function()
    {
        var title = $(".register_title", this);

        $("#hidden_registration_type").html('Representative');
        $(".register_title.form").html(title);
        $("#register_right_box").fadeIn(300);
    });
});

Answer 1

您要移动标题元素，而不是复制标题内容，请尝试var title = $(".register_title", this).html()

$("#school_left_box").click(function() {
    var title = $(".register_title", this).html();

    $("#hidden_registration_type").html('School');
    $(".register_title.form").html(title);
    $("#register_right_box").fadeIn(300);
});

演示：Fiddle