After selecting a menu item, I dynamically add the center section of the webpage using jQuery. The different HTML pages are added in a similar manner, such as:
$.get("biosketchStart_Select.html", function (data) {
$("#custom_data_container").html(data);
});
My question is: Can I update an input field or add a row to a table on the main page after loading the new content? Typically, I would do something like this:
$('#bioTable').append('<tr id="bio-modal-' + obj.RecID + '"><td width="15%">Created</td><td width="15%">Last Update</td><td class="n" width="25%">' + obj.BiosketchName + '</td><td width="25%">' + obj.Category + '</td><td width="1%"></td><td><span class="underline"><a href="#/" onclick = "deleteBio(\'' + obj.BiosketchName + '\',' + obj.RecID + ')" >Delete</a></span><span class="word-spacing"><span class="underline"><a href="#/" onclick = "editBio(\'' + obj.RecID + '\')">Edit</a></span></span></td></tr>');
This code adds a row to the bioTable, but it needs to be triggered from the main page based on user input. Do I need to use Event Delegation for this task? Is it possible to call a JavaScript function on the added HTML page using Event Delegation?
I came across a similar situation on Stack Overflow, but I don't have a specific event that triggers on the added HTML page.
$('Document').on(eventName????, '#bioTable', function() {});
While I understand the concept behind the above line of code, I'm not sure how to apply it in my case where I don't have a direct event. I need the rows to be automatically updated based on the main page's values.