jquery - Added data attribute doesn't work

Question

I'm adding data attributes and classes to a <a>: if I hardcode this attributes/classes it works, but if I add them dynamically it doesn't work.

An event should be fired when clicking the <a>

I have this HTML:

<a id="get_started" href="#price_table">
    <button class="btn action_button btn-sm active">Get Started</button>
</a>                           

And this jQuery:

$(document).on('touchstart click', '.target > li > a', function(e){
    category = 'books';
    if(category=='books') {
        $('#get_started').addClass('btn_response').addClass('md-trigger').attr('data-subject', category).attr('data-modal', 'modal_response').attr('href','#');
    }    
});

Doesn't dynamically data attributes give the same effects than if I hardcode them?

Answer 1

The problem here is not the fact the library is not adding the data attributes. It is related to the fact the other script runs before this code is added to the page so it does not find the elements.

You need to trigger the code that scans the document and does what you are after. Since we have no idea what the library is, that is all the help I can give.