jquery addClass has no effect
<p>I have this html:</p>

<pre><code>&lt;div class="container"&gt;
    &lt;div id="cell1" class="cell"&gt;&lt;div class="content"&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;div id="cell2" class="cell"&gt;&lt;div class="content"&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;div id="cell3" class="cell"&gt;&lt;div class="content"&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.container {
    width: 300px;
    height: 300px;
    background-color: green;
}

.cell {
    background-color: red;
}

#cell1 {
    width: 70px;
    height: 70px;
}

#cell2 {
    width: 70px;
    height: 70px;
}

#cell3 {
    width: 70px;
    height: 70px;
}

.white {
    background-color: white;
}

.yellow {
    background-color: yellow;
}

.content {
    width:40px;
    height:40px;
    background-color:blue;
}
</code></pre>

<p>Javascript:</p>

<pre><code>$(document).on('click', '.cell', function(e) {

    $(this).parent().children().removeClass('white');
    $(this).parent().children().children().removeClass('yellow');

    $(this).addClass('white');
    $(this).find('.content').addClass('yellow');
});
</code></pre>

<p>The problem I am having now is addClass('yellow') has no effect. However, if I delete the background-color in content class, it works. Any thoughts why?</p>

<p>jsFiddle link:
<a href="http://jsfiddle.net/rexwang/FWh6E/" rel="nofollow">http://jsfiddle.net/rexwang/FWh6E/</a></p>

<p>Thanks for the answers, it works! But I really don't like using addClass and removeClass, is  it posible to use e.currentTarget.id to achieve the same goal? </p>
