jquery无法改变页面内容，调用console.log($(this).html())方法显示已经改变了

这是我的页面代码：

<span title='1' class="showpanel">点击查看</span>
<span title='2' class="showpanel">点击查看</span>
<span title='3' class="showpanel">点击查看</span>
<div id="panel" style="display:none;"></div>
<script>
    $(document).ready(function() {
        $(".showpanel").click(function(){
            if($("#panel").is(":hidden")){
                $(this).html("点击关闭");
                innerobj=$.ajax({url:"MyServlet"+"?itemId="+$(this).attr("title"),async:false});
                $("#panel").html("<section id='dg-container' class='dg-container'>"
                    +"<div class='dg-wrapper'>"
                    +innerobj.responseText
                    +"</div>"
                    +"<nav><span class='dg-prev'>&lt;</span><span class='dg-next'>&gt;</span></nav>"
                    +"</section>"
                    +"<script>");
                $("#panel").show();
            console.log($(this).attr("title"));
            }
            if($("#panel").is(":visible")){
                $("#panel").hide();
                $(this).html("点击查看");
            }
        });
    });
    </script>

我点击“点击查看”后，“点击查看”并没有改变成“点击关闭”，但是调用console.log($(this).html())在浏览器调试时是能输出正确的啊，id为panel的元素也没有在页面中显示出来。。。这咋回事啊。。。各位大侠帮帮忙