使用JQuery創建元素時遇到問題

Question

我有這個表格：

<form>
  <input id="checkuser" type="text" name="user" placeholder="Your username"/>
</form>

我正在使用JQuery來檢查所寫的用戶名是否可用。 這是JQuery代碼：

 $('#checkuser').click(function (){

     $(this).change(function () {
     $.ajax( {
       url: '/check',
       type: 'POST',
       cache: false,
       data: { checkuser: $(this).val() },
       dataType: "json",
       complete: function() {

    },

    success: function(data) {

        var check = JSON.stringify(data.aval);

        if (check == "false") {

            $('<p>Not available.</p>').insertAfter('#checkuser');

        }

        else {

              $('<p> Available!</p>').insertAfter('#checkuser');

        }

    },
    error: function() {

       console.log('process error');

    }
   });   
  }); 
 });

的問題是：如果用戶是不可用，則用戶必須重寫的用戶名和當jQuery的重新檢查，如果是可用的，而不是重寫的內容<p> ，JQuery的創建另一個<p>旁邊的老<p>因此，結果如下： Not available.Available! ，而只寫其中之一。 我該如何解決？

Answer 1

為了解決這個問題，我將在輸入之后添加一個空白的<p></p>標記，並在需要時更新該標記。

     <form>
       <input id="checkuser" type="text" name="user" placeholder="Your username"/>
       <p></p>
     </form>
     $('form p').text('Available!');

Answer 2

insertAfter會將新的html上下文附加到div。 而是在checkuser div之后創建另一個div並替換其中的html：

<input id="checkuser" type="text" name="user" placeholder="Your username"/>
<div id="msg"></div>

然后：

$('#msg').text('your text if available or not here');

Answer 3

insertAfter（）方法按設計方式工作：它找到元素（在這種情況下為#checkuser ），並在其后追加一個新段落。

您可能需要在INPUT標記之后創建DIV或SPAN元素，如下所示：

<span id="checkuser-validation"></span>

然后修改您的JavaScript代碼，如下所示：

if (check == "false") {

        $('#checkuser-validation').Empty();
        $('#checkuser-validation').Html('Not Available');

}

... 等等。 希望有幫助:)