更新不同元素後元素內容消失

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