Jquery .after函数

Question

下面的代码来自.aspx文件

<div class="clearfix" style="margin-bottom: 10px">
   <span class="spinfo">Name:</span>
   <div>
        <asp:TextBox runat="server" ID="txtname"></asp:TextBox>
    </div>
</div>

下面的代码来自.css文件：

.spana1{
    background-position: left center;
    color: #c80000;
    background-image: url('symbol-error.png');
    background-repeat: no-repeat;
    padding-left: 17px; 
}

下面的代码来自.js文件

var error = true;    
$(document).ready(function () {
    $("#txtname").focusout(function () {
        error = false;
        $(".spana1").remove();
        if ($("#txtname").val() == "") {
            $("#txtname").after("<span class='spana1'>Please Enter your Name</span>");
            error = true;
        }
    });
});

当#txtname的内容等于null时失去焦点时，应该调用这个raw：$("#txtname").after("<span class='spana1'>Please Enter your Name</span>");

但结果是：

​

​

但我用的是.after。当我尝试时，.before的结果是相同的。

可能是什么原因？

Answer 1

尝试使用floating of input element CSS，

#txtname{
   float:left;
}

还可以使用$(this)，而不是重复使用相同的选择器，

$(document).ready(function () {
    $("#txtname").focusout(function () {
        error = false;
        $(".spana1").remove();
        if (this.value == "") { // you can use $(this).val() also
            $(this).after("<span class='spana1'>Please Enter your Name</span>");
            error = true;
        }
    });
});