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重新检查时是否可用，而不是重写的内容，JQuery再创建另一个对于旧的，这是结果：Not available.Available!，而只写其中一个。我该如何解决这个问题？

Answer 1

要解决这个问题，我会在输入后添加一个空白标记，并在需要时更新此标记。

     <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（）方法按设计工作：它找到元素（在这种情况下为 #cheuser ）并附加一个新段落在它之后。

您可能需要在INPUT标记之后创建一个DIV或SPAN元素，如下所示：

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

然后调整您的JavaScript代码，使其如下所示：

if (check == "false") {

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

}

......等等。希望有所帮助：）

用JQuery创建元素很麻烦

3 个答案: