What's the correct way to send Javascript code along with rendered HTTP to a client?

Question

Mid development I decided to switch to server-side rendering for a better control amongst other benefits. My web application is completely AJAX based, no url redirecting, so the idea here is a website that builds itself up

I just couldn't figure out the proper way to send javascript events/functions along with the html string, or should all the necessary javascript always be preloaded in the static files?

Let's say client clicks a pre-rendered button 'open table'

The server will make a query, build the html table and send it back, but this table also needs javascript triggers and functions to work properly, how are these sent, received and executed?

There are a couple of articles that mention to not use eval() in Javascript, is there any way around this? I don't want to have to preload unnecessary events for elements that don't yet exist

The server is Python and the Client is Javascript/JQuery

Theoretical example :

Client Base Javascript :

$("body").on("click", "#open_table", function() {

    $.getJSON('/get_table', function(response){

        $("#table_div").append(response.html);
        eval(response.javascript()); //??
    }
});

Python Server(views.py) :

def get_table(request):
    data = {}
    #String containing rendered html
    data['html'] = get_render_table()
    #String containing Javascript code?
    data['javascript'] = TABLE_EVENTS_JAVASCRIPT
    return HttpResponse(json.dumps(data),content_type='json')

Worth noting my question comes from an experimental/learning perspective

Answer 1

Update:

You can use jQuery.getScript() to lazy load JS. I think this solution is as close as you can get to run JS without using eval().

See this example:

jQuery.getScript("/path/to/script.js", function(data, textStatus, jqxhr) {
    /* Code has been loaded and executed. */
    console.log( data ); // Data returned
    console.log( textStatus ); // Success
    console.log( jqxhr.status ); // 200
    console.log( "Load was performed." );
});

and "/path/to/script.js" could be a string returned from $.getJOSN response.

Also, the documentation for getScrippt() has examples on how to handle errors and cache files.

Old Answer:

Using .on() attaches events to current and future DOM elements. You can either attache events prior to DOM insertion or attache event after DOM insertion.

So in your example you can do something like:

$("body").on("click", "#open_table", function() {
$.getJSON('/get_table', function(response){
 var code = $(response.html);
   code.find(".elementToFind").on("click", function (){
 // Code to be executed on click event
});
    $("#table_div").append(code);
}
});

I did not test the code but I think it should work.