javascript - 在一个a标签内添加了一个单击事件,想在时间里面给这个a标签添加类样式

Question

在一个span标签里面有多个a标签，a标签是通过ajax实现的。想在a标签里面添加单击事件，在他单击的时候给这个a标签添加类样式 ，同时删除其他a标签类样式

ajax:

$.ajax({type:"post",url:"carbrand/findCarBrandHot",dataType:"json",success:function(data){
                var html="<a class='on' href='' rel='nofollow'>不限</a> ";
                    var listr = "";                        
                    for(var i = 0; i < data.length; i++){                
                            listr+="<a class=''  title=''  onclick='ch()'>"
                                    +data[i].brand_name+" </a>";                                    
                    } 
                    html+=listr;
                    $(".clikbr").html(html);
               }
        });

html:

<span class="clikbr"></span>

javascript:

 function ch(){
        //方法能触发
        //添加样式
        $(this).addClass("on");  //这种方法不行    
        $(this).addClass("hoverWidgetactive").siblings().removeClass("hoverWidget active");  //也实现不了,
        
        
    };

貌似通过ajax新增的标签获取不到,不知道怎么获取标签

Answer 1

使用事件委派

$('.clikbr').on('click', 'a', function() {
     $(this).addClass("on");    
     $(this).addClass("hoverWidgetactive").siblings().removeClass("hoverWidget active");  
});

Answer 2

//你可以改成这样

$.ajax({type:"post",url:"carbrand/findCarBrandHot",dataType:"json",success:function(data){
                var html="<a class='on' href='' rel='nofollow'>不限</a> ";
                    var listr = "";                        
                    for(var i = 0; i < data.length; i++){                
                            listr+="<a class=''  title=''  onclick='ch()'>"
                                    +data[i].brand_name+" </a>";                                    
                    } 
                    html+=listr;
                    $(".clikbr").html(html);
                    //必須在這裡給<a>標籤綁定事件
                    $(".clikbr a").on("click",function(){
                        $(this).addClass("on");  
                                                                      
                     
                     
       $(this).addClass("hoverWidgetactive").siblings().removeClass("hoverWidget active");
                    });
               }
        });