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

}

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