Javascript 如何按时追加并追加到span中

在这段代码中，我尝试将标题附加到具有唯一id的span中。此AJAX调用将返回用户名，并仅将其附加到具有特定id的特定span中一次，因此，如果我再次悬停，则它应该不起作用

现在它在AJAX调用中运行良好，但每次我悬停时它仍然运行。另一个问题是在跨度之后附加，而不是在跨度中。如何解决

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $("#16").hover(function(e){
            var val = 16;
            $.ajax({
                'type': 'get',
                'url': 'tree/get_parent_ajax/'+ val,
                'dataType': 'json',
                'success': function (data) {
                    $("span#"+val).append("title= '" + data + "'");
                    alert(data);
                }
            }, function(){
                e.stopPropagation();
                //This function is for unhover.
            });

        });
    });

</script>


<a href="http://localhost/ammar/users/cv/16" class="color-white" target="_blank">
                <span id="16" class="first_name">الجد راشدtitle= ' الجد راشد  عبدالرحمن بن عمار آل محمد 'title= ' الجد راشد  عبدالرحمن بن عمار آل محمد 'title= ' الجد راشد  عبدالرحمن بن عمار آل محمد 'title= ' الجد راشد  عبدالرحمن بن عمار آل محمد 'title= ' الجد راشد  عبدالرحمن بن عمار آل محمد 'title= ' الجد راشد  عبدالرحمن بن عمار آل محمد '</span>
                </a>

$（文档）.ready（函数（）{
$（“#16”）。悬停（函数（e）{
var=16；
$.ajax({
'type'：'get'，
“url”：“tree/get_parent_ajax/”+val，
“数据类型”：“json”，
“成功”：函数（数据）{
$（“span#“+val）.append（“title=”“+data+””）；
警报（数据）；
}
}，函数（）{
e、 停止传播（）；
//此功能用于取消覆盖。
});
});
});

我没有得到您想要的确切信息，但您可以检查跨度是否已包含数据。例如：

$("#16").hover(function(e){

        $(this).unbind('mouseenter mouseleave'); //detach event listeners
       if($(this).html()!="")
       {
       var val = 16;
        $.ajax({
            'type': 'get',
            'url': 'tree/get_parent_ajax/'+ val,
            'dataType': 'json',
            'success': function (data) {
                $("#"+val).html('');   
                $("span#"+val).append("title= '" + data + "'");
                alert(data);
            }
         );
        }, function(){
            e.stopPropagation();
            //This function is for unhover.


    });

---

在ajax成功的情况下，只需清空span的旧值并添加新接收的值。

只需使用计数器即可获得第一个或另一个悬停：

$(document).ready(function() {
    var counter = 0;
    $("#16").hover(function(e){
        var val = 16;
        if(counter==0){
        $.ajax({
            'type': 'get',
            'url': 'tree/get_parent_ajax/'+ val,
            'dataType': 'json',
            'success': function (data) {
                $("span#"+val).attr("title= '" + data + "'");
                counter = counter + 1;
                alert(data);
            }
        }, function(){
            e.stopPropagation();
            //This function is for unhover.
        });
        }
    });
});

页面加载时计数器将为0（并将执行ajax调用）。当ajax成功时，它将变为1，然后悬停将不再触发ajax，除非重新加载页面。

---

我还修正了关于标题的问题。您需要使用.attr（）来更改html元素的属性。append将用于在html标记内添加文本。因此，如果您想在页面上可见的范围内添加一些文本，则将使用此选项

您可以显示完整的代码还是小提琴？