中期开发我决定切换到服务器端渲染以获得更好的控制amongst other benefits.我的Web应用程序完全基于AJAX,没有URL重定向,所以这里的想法是一个自我构建的网站
我只是无法弄清楚发送javascript事件/函数以及html字符串的正确方法,还是应该在静态文件中预先加载所有必需的javascript？
假设客户点击预渲染按钮’打开表’
服务器将进行查询,构建html表并将其发回,但此表还需要javascript触发器和函数才能正常工作,这些是如何发送,接收和执行的？
有几篇文章提到不要在Javascript中使用eval(),有什么方法可以解决这个问题吗？我不想为尚不存在的元素预加载不必要的事件
服务器是Python,客户端是Javascript / JQuery
理论范例：
客户端基础Javascript：
$("body").on("click","#open_table",function() {
$.getJSON('/get_table',function(response){
$("#table_div").append(response.html);
eval(response.javascript()); //??
}
});
Python服务器(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')
值得注意的是,我的问题来自实验/学习的观点
最佳答案
更新：
你可以使用jQuery.getScript()来延迟加载JS.我认为这个解决方案尽可能接近运行JS而不使用eval().
看这个例子：
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." );
});
和“/path/to/script.js”可以是从$.getJOSN响应返回的字符串.
此外,getScrippt()的文档还提供了有关如何处理错误和缓存文件的示例.
旧答案：
使用.on()将事件附加到当前和未来的DOM元素.
您可以在DOM插入之前附加事件,也可以在DOM插入之后附加attache事件.
因此,在您的示例中,您可以执行以下操作：
$("body").on("click",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);
}
});
我没有测试代码,但我认为它应该工作.