javascript - 使用 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!');