为什么在循环中改变颜色后颜色不会改变

Question

I have the following html code:

<div class="clm class2"></div>
<div class="clm class3"></div>
<div class="clm class4"></div>
<div class="clm class3"></div>
<div class="clm class4"></div>

And I have the following css code:

.clm{
    width:50px;
    height:50px;
    margin-bottom: 10px;
    border-color: black;
}

.class1{
    background: red;
}

.class2{
    background: green;
}

.class3{
    background: blue;
}

.class4{
    background: black;
}

When I clicked div block with class class2 , I need change all div's with class3 to class4

For example:

before: <div class="clm class3"></div>

after click: <div class="clm class4"></div>

I have the following js code (jQuery):

$(".class2").click(function(){
        $(".class3").each(function() {
            $(this).attr('class','clm class4');
        });
    });

This code work fine. The colour is changed. I have the following other js script (jQuery):

$(".class4").click(function(){
        $(this).attr('class','clm class1');
    });

If I clicked to div with class4 before click div with class2 the code work ok, but when I clicked to div with class2 and I try to change colour click in div with class4 it's does not work.

PS the html code changed correctly and I see right colour.

Answer 1

You need to use event delegation for all class names that are added/removed dynamically.

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

$("body").on('click','.class4',function(){
    $(this).attr('class','clm class1');
});

Answer 2

The problem is that when you bind the $('.class4') click handler, the elements to which you're dynamically adding the .class4 classname to do not exist. You need to use event delegation as follows:

$('body').on('click', '.class4', function() {
    $(this).attr('class', 'clm class1');
});

jsFiddle Demo

As a post-script to the above, it's also worth noting that using addClass() and removeClass() is apparently much faster than setting the class attribute using attr() .

Answer 3

Use event delegation for dynamically created class in the DOM. Otherwise DOM didn't know whether the class is found or not. In these use event delegation it traverse once again from the root of the body and find the class is found or not and

Note: Use .addClass() for added new classes instead of .attr()

$("body").on('click','.class4',function(){
    $(this).addClass('clm class1');
});

Answer 4

我觉得这可以用$（'。class3'）。removeClass（“class3”）。addClass（'class4'）;