Issue replacing div class on click with jQuery

Question

Having the following configuration in my web page

<div class="results_list">
<div class="bg_color shadowy item_wrapper">
    <div class="not_shown">some text here...</div>
    <div class="social_and_download">
        <div class="play_div"> 
            <a class="play" href="#">play</a>
        </div>
    </div>
</div>
<div class="bg_color shadowy item_wrapper">
    <div class="not_shown">other text text here...</div>
    <div class="social_and_download">
        <div class="play_div"> 
            <a class="play" href="#">play</a>
        </div>
    </div>
</div>
</div>

, with many div.item_wrapper elements, each having one div.not_shown child, I want to make this visible, by changing its class when clicking the corresponding a.play link . The best I could come up with was :

<script type="text/javascript">   
$(document).ready(function() {  
    $("a.play").click(function () {
        $(this).closest("div.item_wrapper").find("div.not_shown").addClass('shown').removeClass('not_shown');
     });        
});

and it's not working. Could you tell me what I am doing wrong? 10x

Works fine here http://jsfiddle.net/j08691/qb2D7/. Are your divs being added dynamically to your page? — j08691, Sep 24 '13 at 20:03
what if you use the [hide of jquery](http://api.jquery.com/hide/) ? — FxckDead, Sep 24 '13 at 20:03
If your HTML is being added dynamically use, event delegation like this .. $('.results_list').on('click', 'a.play', function (){}); or $(document).on('click', 'a.play', function (){}); — Venkata Krishna, Sep 24 '13 at 20:16
Thanks guys, indeed the divs are generated dynamically... Thanks for the hint — ama, Sep 25 '13 at 07:28

score 0 · Answer 1 · answered Sep 25 '13 at 01:56

0

May be try to .removeClass first and then .addClass help?

answered Sep 25 '13 at 01:56

Haiz

171
2
11

Thanks, I guess it makes more sense semantically to first remove the class and then add a new one – ama Sep 25 '13 at 07:28

score 0 · Accepted Answer · answered Sep 25 '13 at 07:39

Well, the initial problem was solved - it worked indeed from the beginning... STUPID me placed the javascript code before I inserted the jquery-1.9.1.min.js file into page.. I considered your suggestions anyway and here is how the code looks like:

<script type="text/javascript">   
$(document).ready(function() {  
    $('.item_wrapper').on('click', 'a.play', function () {
        $(this).closest("div.item_wrapper").find("div.not_shown").removeClass('not_shown').addClass('shown');
        $(this).closest("div.item_wrapper").focus();
     });        
});

It was actually the item_wrapper div that is dynamically generated under the results_list div - I corrected that in my question (for the jQuery script it made no difference anyway)

Thanks a lot again

P.S. Now I am struggling to get the focus on the item_wrapper where I clicked play, because once I do that it always takes me to the first one - if you have any ideas there too please leave a comment. The following line brought nothing:

 $(this).closest("div.item_wrapper").focus();

I have tried adding the tabindex to the item_wrapper div as suggested here http://stackoverflow.com/questions/3777580/change-focus-into-particular-div , even generating the tabindex dynamically, but it still doesn't get focus using the code above... — ama, Sep 26 '13 at 04:37

Issue replacing div class on click with jQuery

2 Answers2