鍍金池/ 問答/HTML/ ajax請求到數(shù)據(jù)會給上一個元素添加數(shù)據(jù)

ajax請求到數(shù)據(jù)會給上一個元素添加數(shù)據(jù)

1.當我點擊其中一個團隊的時候,會贏響上一個元素的內(nèi)容~~~
代碼如下:

<div class="txt-right-bot">
                    <ul class="txt-ul tree"> <!--tree -->
                        <li class="txt-ul-li"><span>成都</span><span class="bot-xz" style="display: none;">選擇</span>
                            <ul class="ul_this">
                                <li class="txt-ul-liii">
                                    <span class="btn-aj">團隊1</span>
                                    <span class="bot-xz" style="display: block;">選擇</span>
                                    <ul class="txt-ul-lii"></ul>
                                </li>
                                <li class="txt-ul-liii">
                                    <span class="btn-aj">團隊2</span>
                                    <span class="bot-xz" style="display: block;">選擇</span>
                                    <ul class="txt-ul-lii"></ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
$(document).ready(function(){
    $('.txt-ul-liii').each(function(){
        var str = ' ';
      $(this).one('click','.btn-aj',function(){
            $.ajax({
                type:'GET',
                url:'ceshi.json',
                dataType:'json',
                success:function(data){
                    $.each(data.luozi,function(i,n){
                    str += '<li class="sc">'+n.email+'</li>'
                })
               $('.txt-ul-lii').append(str)
            }
        })
         return false;
       });
    });
})

本地數(shù)據(jù)只有2條,第一次點擊的時候顯示是正常的,第二次就不對了~~會給第一次點擊的里面添加請求到數(shù)據(jù)

回答
編輯回答
淡墨

$('.txt-ul-lii')在append時并沒有限定父元素,所以就會添加到所有的里。

2017年4月19日 09:34
編輯回答
未命名

js第三行放到$.ajax前面

2018年9月20日 20:34
編輯回答
替身
$(document).ready(function(){
    $('.txt-ul-liii').each(function(){
        var str = ' ';
        var _this=$(this);//這里加一行
      $(this).one('click','.btn-aj',function(){
            $.ajax({
                type:'GET',
                url:'ceshi.json',
                dataType:'json',
                success:function(data){
                    $.each(data.luozi,function(i,n){
                    str += '<li class="sc">'+n.email+'</li>'
                })
               //$('.txt-ul-lii').append(str) //這里有問題
               _this.find(".txt-ul-liii").append(str);//改成這樣
            }
        })
         return false;
       });
    });
})
2017年6月15日 20:36