javascript - Un événement Click est ajouté à une balise a et je souhaite ajouter un style de classe à la balise a dans les délais

Question

Il y a plusieurs balises a dans une balise span, et les balises a sont implémentées via ajax. Je souhaite ajouter un événement de clic à la balise a, ajouter un style de classe à la balise a lorsqu'il clique et supprimer les styles de classe des autres balises a en même temps

ajax :

<code>$.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);
               }
        });
</code>

html :

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

javascript :

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


    };
</code>

Il semble que les balises ajoutées via ajax ne puissent pas être obtenues. Je ne sais pas comment obtenir les balises

.

Answer 1

Utiliser la délégation d'événement

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

Answer 2

//Vous pouvez le changer en ceci

<code>$.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");
                    });
               }
        });</code>