Search code examples
jqueryjquery-tabs

Jquery Tabs on click option

I'm using JQuery tabs. On click, I'm trying to just display an alert message (and make some coloring changes). Neither of which works -- I'm not sure why as when I move it out of the tabs part into regular html it works perfectly. Here's the relevant code:

In the addTab() from Jquery Tabs:

      tabContentHtml =  "<div class=\"favorite\" status=\"off\">&#9734</div>"

My own javascript code:

    $(".favorite").click(
        function(){
            alert("in here");
            var current_status = $(this).attr("status");
            if(current_status == "off"){
                $(this).html("&#9733;");
                $(this).css({"color":"gold"});
                $(this).attr("status", "on");
            }else if (current_status == "on"){
                $(this).html("&#9734;");
                $(this).css({"color":"#EFEFEF"});
                $(this).attr("status", "off");
            }
        }
    );

Note that I do see the star in the tab, it's just not responsive!

Solution

  • There is no click method for jQuery UI Tabs. Instead it is called as activate method, 

    $(function () {
    $("#tabs").tabs({
        activate: function (event, ui) {
            alert("I'm triggered");  //Within this you can wtite ToDos
        }
    });
});

    JSFiddle