Run jQuery callback on element class change?

Question

Here's the current jQuery code I'm trying to use

$("ul.nav.nav-tabs li.active a").each(function(){
        switch(this.hash) {
            case "#core":
                alert("Core");
            break;
            case "#parallel":
                alert("Parallel");
            break;
            case "#cron_settings":
                alert("Cron Settings");
            break;  
        }
})

Here's the HTML Markup I'm using also

<ul class="nav nav-tabs">
    <li class="active"><a href="#core" data-toggle="tab">Core Settings</a></li>
    <li><a href="#parallel" data-toggle="tab">Parallel settings</a></li>
    <li><a href="#cron_settings" data-toggle="tab">Cron limit settings</a></li>
</ul>

When the active class changes, I need it to basically re-run the switch() as it's only being performed once on the document.ready, how can I get it to re-run the switch()? possibly using change() ?

There is no cross-browser event for element attribute changes — Bergi, Dec 24 '13 at 21:05
Depending on what browser you are testing, you might also find interesting the`DOMAttrModified` event. Keep in mind it's not supported by all browsers. See http://help.dottoro.com/ljfvvdnm.php#additionalEvents for details. — Thalis K., Dec 24 '13 at 22:35

Thalis K. · Accepted Answer · 2013-12-24T22:20:02.170

2

Based on earlier poster who suggested the 'hashchange' event, here is a working copy of what you want:

$('li').on('click', function() { 
    $('li').removeClass('active');
    $(this).addClass('active'); 
    // UNNECESSARY: window.location.hash=$('a', this).attr('href'); 
});

$(window).on('hashchange', function(){
        switch(window.location.hash) {
            case "#core":
                alert("Core");
                break;
            case "#parallel":
                alert("Parallel");
                break;
            case "#cron_settings":
                alert("Cron Settings");
                break;
        }
});

edited Dec 24 '13 at 22:20

answered Dec 24 '13 at 22:02

Thalis K.

7,363
6
39
54

Hmm... If you can count on the onClick event firing, why no just put the switch statement inside the onClick callback function, instead of adding an extra event listener? If you can't count on the onClick event firing, then your 'window.location.hash' won't have the correct value. – Omn Dec 24 '13 at 22:10
Also, you don't run the switch function once intially as indicated was needed. – Omn Dec 24 '13 at 22:12
I worked the `
` click bind initially to make sure the `active` class is adjusted correctly on clicking a link. What is true, is that the `window.location.hash=$('a', this).attr('href');` is unnecessary since the click is actually on the included `` which will set window.location correctly. Event delegation does the work. Also, an initial run of the `switch` is something the OP already knows how to do.

Thalis K.

Dec 24 '13 at 22:17

That's nifty. But it only works if the links are clicked. Since that's true, why don't you use the on click callback to run the switch? – Omn Dec 24 '13 at 23:23

Omn · Answer 2 · 2013-12-24T23:39:10.203

I'm not familiar with the browser compatability of the 'hashchange' event.

I think this is being over thought. There are two fairly easy solutions.

The simplest is assuming that the active link will change based on the user clicking on those links. In this case, just use the onClick trigger to re-run your script.

var FooBar = function(){
    $("ul.nav.nav-tabs li.active a").each(function(){
        switch(this.hash) {
            case "#core":
                alert("Core");
            break;
            case "#parallel":
                alert("Parallel");
            break;
            case "#cron_settings":
                alert("Cron Settings");
            break;  
        }
    });
};
FooBar();//run the function once initially
$("ul.nav.nav-tabs").each(function(){
    $(this).click=FooBar;
});

Alternatively, if the 'active' class might be modified via javascript, you can make a call to FooBar in that code. If you can't modify that javascript, then you can use a timeout to work around this.

setInterval(FooBar, 500);//Run the switch function every half second

I'm not sure what exactly you are trying to accomplish, I suspect there might be an simpler way to do this.

EDIT:

You can use this code, modified from the answer by Thalis Kalfigkopoulos. This will run the switch statement directly from the on click event:

$('li').on('click', function(e) { 
    $('li').removeClass('active');
    $(this).addClass('active');
    switch($(this).children('a').prop('hash')) {
            case "#core":
                alert("Core");
                break;
            case "#parallel":
                alert("Parallel");
                break;
            case "#cron_settings":
                alert("Cron Settings");
                break;
        }
});

score 0 · Answer 3 · answered Dec 24 '13 at 21:07

This might work.

<script>
    $(function(){
        // Bind the event.
        $(window).on("hashchange",function(){
            // Alerts every time the hash changes!
            alert( "call you function");
            // your switch..
        })
    });
</script>

Run jQuery callback on element class change?

3 Answers3