jquery模式中的html标题

Question

我遇到以下代码的问题：

$("#btn" ).on('click', function(e) {

    var dialog = $( ".step" ).dialog({
        modal: true,
        title: "<div class='title'><h4>Testing title</h4></div>",
        title_html: true,
        buttons: [ 

            {
                text: "OK",
                "class" : "btn",
                click: function() {
                    $( this ).dialog( "close" ); 
                } 
            }
        ]
    });


    dialog.data( "uiDialog" )._title = function(title) {
        title.html( this.options.title );
    };


    $(".ui-dialog-titlebar-close").hide();
    $(".ui-front").removeClass("ui-widget-overlay");
    $(".ui-corner-all").removeClass("ui-widget-header");
    $(".ui-corner-all").removeClass("ui-dialog-titlebar");
});

用户第一次单击#btn按钮时模式打开但标题显示为文本：<div class='title'><h4>Testing title</h4></div>。关闭模态并重新打开后，标题显示正确。

有人知道为什么第一次不能正常工作吗？