Why is my load in jquerytabs not working?

Question

I´m currently working with jquery tabs, adding them and removing them. Here is my code:

function addTab(){
                    contador++;
                    var categoria = "AppCategoria04";
                    var idA = "AIdTabs0"+contador;
                    var idLi = "liIdTabs0"+contador;
                    var idP = "#ecApp0"+contador;
                    var titulo = "Friends Discussions";
                    var template = '<li id="'+idLi+'">'+
                                        '<div class="'+categoria+'"></div>'+
                                        '<a id="'+idA+'" href="#{href}">#{label}</a>'+// Aquí va el onclick
                                        '<span class="ui-icon-close2"></span>'+
                                    '</li>';
                    $('#ecContenedorFolders').tabs({
                        load: function(event, ui) {
                            console.log("load");                                
                        },                      
                        tabTemplate: template,
                        panelTemplate: "<p><a>Panel Text here: "+contador+"</a></p>"
                    });                 
                    $("#ecContenedorFolders").tabs("add", idP, titulo);
                    $("#"+idLi).addClass("separacionTabs");
                    $("#"+idA).addClass("tabApp");  
                    /// Para poder cerrar el tab
                    removerApp();
}

My problem is that my load function doesn´t seem to working and i can never get to print my console after i add a new tab or when i switch between tabs. Does anyone knows why is this happening? Thanks in advance.

Answer 1

The load event is triggered only when you are using remote content in your tabs. For example if you are populating your tab content using AJAX fetch then load is triggered after the fetch is complete.

So, this event does not apply to your code above and hence is never triggered. Thus no console log.