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

尝试使用 CSS 之类的 input element 中的 floating，

#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;
        }
    });
});