jQuery при отсутствии срабатывания для динамически генерируемых элементов

Question

У меня есть вкладки, содержащие аккордеоны, содержащие кнопки. После переключения между вкладками кнопки больше не вызывают событие нажатия. Я абстрагировал свой код ниже и проверил в журналах, что refreshBehaviours () всегда вызывается после рендеринга кнопок. Почему событие не запускается, как ожидалось?

    $( window ).load(function() {
        googleMapScript.addEventListener('load',() => {

            // Tabs functionality
            $('body').on('click', '.tablinks', function() {
                // Declare all variables
                var i, tabcontent, tablinks;              
                // Get all elements with class="tabcontent" and hide them
                tabcontent = document.getElementsByClassName("tabcontent");
                for (i = 0; i < tabcontent.length; i++) {
                    tabcontent[i].classList.remove('active');                        
                }              
                document.getElementById('tab-'+this.getAttribute('category')).classList.add("active");
                // Get all elements with class="tablinks" and remove the class "active"
                tablinks = document.getElementsByClassName("tablinks");
                for (i = 0; i < tablinks.length; i++) {
                    tablinks[i].classList.remove('active');
                }              
                this.classList.add("active");
                // hide toggleable categories that are not of this tab
                for (var category in self.categories) {
                    if (category != this.getAttribute('category') && self.categories[category].toggles) {
                        self.hideCategory(category)
                    }
                }
                // show this category
                markerList.showCategory(this.getAttribute('category'))              
                console.log('refreshed behaviour')                              
            })

            // Accordion functionality
            $('body').on('click', '.accordion', function(){

                /* Toggle between adding and removing the "active" class,
                to highlight the button that controls the panel */
                this.classList.toggle("active");            

                /* Toggle between hiding and showing the active panel */
                var panel = this.nextElementSibling
                panel.classList.toggle("active");                

                var category = this.getAttribute('category')
                var marker = this.getAttribute('marker')                
                if (this.classList.contains('active')) {
                    new google.maps.event.trigger(markerList.categories[category].markers[marker], 'mouseover')
                    if (markerList.startPoint != 0) { 
                        markerList.categories[category].markers[marker].getDistance(markerList.startPoint).then(function(data){
                            var data = data.rows[0].elements[0]        
                            panel.innerHTML = panel.innerHTML+               
                            '<hr>Avstånd '+data.distance.text+'<br/>Resa med '+markerList.transporation+': '+data.duration.text                        
                        })  
                    }                  
                } else {
                    new google.maps.event.trigger(markerList.categories[category].markers[marker], 'mouseout')
                    panel.innerHTML = markerList.categories[category].markers[marker].template[0]
                }

                // find and load in any images in templates designated by the load-image class
                var images = panel.getElementsByClassName('load-image');
                for (var i = 0; i <= images.length-1; i++) {
                    images[i].innerHTML = '<img src="'+images[i].getAttribute('path')+'"/>'
                }    

                // attach expand button if we don't already have one
                if (panel.getElementsByClassName("select-marker").length == 0 && panel.getElementsByClassName("expand-marker").length == 0) {
                    if (markerList.startPoint == 0) {                    
                        panel.innerHTML = panel.innerHTML+`<button class="select-marker" category="${category}" marker="${markerList.categories[category].markers[marker].id}">Välj annons</button>`
                    } else {
                        panel.innerHTML = panel.innerHTML+`<button class="expand-marker" category="${category}" marker="${markerList.categories[category].markers[marker].id}">Läs mer</button>`
                    }                       
                    console.log('refreshed behaviour')
                }                                                                           
            })


            // functionality for generated buttons in accordions
            $('body').on('click', '.select-marker', function(){
                new google.maps.event.trigger(self.categories[this.getAttribute('category')].markers[this.getAttribute('marker')], 'click')
            })
            $('body').on('click', '.expand-marker', function(){
                this.parentElement.innerHTML = self.categories[this.getAttribute('category')].markers[this.getAttribute('marker')].template[1]
                new google.maps.event.trigger(self.categories[this.getAttribute('category')].markers[this.getAttribute('marker')], 'mouseover')
            })
        })              

    })

HTML структура

<div id="list">
    <div id="tablist">
        <button class="tablinks">A tab link</button>
    </div>
    <div id="tab-id" class="tabcontent">
        <button class="acccordion">An accordion</button>
        <div class="panel">
            <button class="select-marker">This button dosent trigger if another tab is opened</button>
        </div>
    </div>
</div>