無法驗證jQuery中的可編輯h2標記

Question

我想更改並驗證html h2標記的值。我把它放在一個div中。目前的情況是，當我按h2標籤時，它會自動打開一個文本框，我可以編輯/清除文本框的值。

問題：當我嘗試清空文本框值時，它不會在運行時生成錯誤消息。但是當我點擊我的jsp文件時會生成錯誤消息。這是一個示例代碼。

<div class="modal-header"> 
    <h2 class="tc_pageheader editableName" id="detailsheader"></h2> 
</div> 

在我的情況下，當id值爲空時，它必須顯示一個錯誤消息，表明h2標籤不能爲空。我想通過使用jQuery（v1.9）進行驗證來實現這一點。

Answer 1

由於沒有太多的代碼可以繼續，我模擬了我認爲你想要做的事情。

演示：http://jsfiddle.net/NnkRV/

代碼：

$(document).on('click', '#detailsheader', function() { 
    $(this).replaceWith("<input type='text' id='edit' value='" + $(this).text() + "' />"); 
}); 

$(document).on('focusout', '#edit', function() { 
    var newTitle = this.value; 
    if (newTitle == '') { 
     alert("Cant be blank!"); 
     return false; 
    } 
    else { 
     $(this).replaceWith('<h2 class="tc_pageheader editableName" id="detailsheader">' + newTitle + '</h2>'); 
    } 
}); 

這只是讓你編輯H2的標題，如果有一個空白標題顯示錯誤。