Add click event on bootstrap tab?

Question

How to add an onClick event on Joomla bootstrap tabs.

https://api.joomla.org/cms-3/classes/JHtmlBootstrap.html

echo JHtml::_('bootstrap.startTabSet', 'myTab', array('active' => 'monday'));
echo JHtml::_('bootstrap.addTab', 'myTab', 'monday',  JText::_('MONDAY', true));
// all html code
echo JHtml::_('bootstrap.endTab');
echo JHtml::_('bootstrap.endTabSet');

I have tried

jQuery('#monday').click(function(e) {
    alert('hello');
});

but it doesn't work.

Answer 1

Here is what worked for me. I'm making an AJAX call, but you can do whatever you want. I added the following to my javascript code in the document ready function. It is stolen and edited from the actual bootstrap framework code, but doesn't override it. I guess you can add multiple functions to the onclick event.

        $(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
        /* These two calls are made in the bootstrap framework code and do not seem to be necessary here. I think this call is adding, not overriding the bootstrap code.*/
        //e.preventDefault();
        //$(this).tab('show');
        var tab_link = e.target.toString();
        var start = tab_link.indexOf('#')+1;
        var tabval = tab_link.substring(start);

        // Make AJAX call to set active_tab.
        jQuery.ajax({
            type: 'POST',
            url: 'index.php?option=com_myjoomlacomponent&format=raw&view=diagnosis&layout=edit&action=setactivetab&tabval='+tabval,
            dataType: 'html',
            success: function (data, status, jq) {
                console.log(status);
            },
            error: function (jq, status, e) {
                console.log('Made AJAX call in document.ready function, error is: '+e+', status is: '+status);
            }
        });
    })