Apologies for the unconventional title, I am currently in the process of creating a website. When the page is initially loaded, I call upon two scripts within the 'head' tag to create an attractive dynamic button effect.
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Subsequently, users have the ability to update their requests on the loaded page using AJAX to retrieve the necessary information.
I then construct a string for the new HTML by extracting data from the returned JSON object. Here is a snippet of the code with the '+=' operation occurring within a loop:
htmlTag ='';
htmlTag += '<div data-role="main" class="ui-content"> <div data-role="collapsible"><h5>'+ json_data[i] +'</h5></div></div>'
Following this, I update a div by setting its innerHTML as this newly created string. The HTML updates as expected with the desired values, however, the CSS and jQuery effects for the buttons do not work.
Is there anyone familiar with why this issue may be happening?
The initial loading works perfectly by utilizing these div classes along with Jinja templating.