Can't reference dynamically added jQuery Mobile element

I am adding foldable button and simple element <a>

to my main html. The code looks like this:

var elements = "";

$('.button').bind('tap', function() {
    elements += "<div class='my_clicker' data-role='collapsible'><h4>heading1</h4><h4>heading2</h4></div>";
    elements += "<a href='#' class='my_clicker'>Click me!</a>";
    $(".button_container").html(elements).trigger('create');
};

$(document.body).on('tap', '.my_clicker' ,function(){
    playAudio('success');
}); 

      

        
        
        
      

    

When I click on an element <a>

, the sound works fine, so everything seems to work, except for the fact that ".my_clicker" does not refer to my legible element, i.e. cannot find it. So it looks like jQuery referencing works, but the jQuery Mobile element is somehow different and cannot be easily referenced. Even when I use 'div' instead of '.my_clicker' in my function $(document.body).on()

, all div elements are making sound, but my collapsible button doesn't work. (I also tried "a" and "h4" instead of ".my_clicker")

When inspecting my html elements in the browser, when I click on the collapsible element, the :: before<div>

expression is highlighted instead of the one I added .

EDIT: . The disabled code does work on my tablet (like apk), even though it doesn't work in the browser! However, it would be nice to know how to make it work in the browser, since jQuery Mobile can be used for web applications too.