Html 如何在添加<;后应用jQuery函数;部门>;通过Ajax?
我正在动态生成一个Html 如何在添加<;后应用jQuery函数;部门>;通过Ajax?,html,ajax,jquery,Html,Ajax,Jquery,我正在动态生成一个,我希望在生成时应用jQuery函数,但它不起作用。我尝试了方法,但它没有按我想要的方式工作。我要应用该函数的是claas=portlet内容和id=live\u图形的,其父级属于portlet ui小部件ui小部件内容ui帮助器clearfix ui角点所有'> 我错在哪里 动态生成的的 HTMLstr += "<div class='portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all
,我希望在生成时应用jQuery函数,但它不起作用。我尝试了方法,但它没有按我想要的方式工作。我要应用该函数的
是claas=portlet内容和id=live\u图形的,其父级
属于portlet ui小部件ui小部件内容ui帮助器clearfix ui角点所有'>
我错在哪里
动态生成的的
HTMLstr += "<div class='portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all'>"+ \
"<div class='portlet-header ui-widget-header ui-corner-all'><span class='ui-icon ui-icon-minusthick'>"+\
"</span>Live Graph</div>" + \
"<div class='portlet-content' id='live_graph' style='height: 270px margin: 0 auto'>" + \
// Want to call the function when the above <div> is generated
"</div></div>"
return HttpResponse(HTMLstr)
这就是我尝试过的:-
而不是
$(function () { in the jQuery function
我将其替换为:-
$('.portlet').on('ready', '#live_graph',function() {
但它不起作用。我错在哪里
问题2.on(事件[,选择器][,数据],处理程序(事件对象))
的语法
ready
是否可以成为事件
这就是我尝试过的
AJAX成功函数
success: function(result){
console.log(widgets_list);
$("#column1").append(result);
$(".column").sortable("refresh");
$("#column1").generate_live_graph();
}
jQuery函数
function generate_live_graph(){
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#live_graph').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}]
});
});
});
}
function generate\u live\u graph(){
$(函数(){
$(文档).ready(函数(){
Highcharts.setOptions({
全球:{
useUTC:false
}
});
var图;
$('live#u graph')。高图表({
图表:{
类型:“样条线”,
动画:Highcharts.svg,//不要在旧IE中设置动画
marginRight:10,
活动:{
加载:函数(){
//设置图表的每秒更新
var系列=本系列[0];
setInterval(函数(){
var x=(新日期()).getTime(),//当前时间
y=数学随机();
系列。添加点([x,y],真,真);
}, 1000);
}
}
},
标题:{
文本:“实时随机数据”
},
xAxis:{
键入:“日期时间”,
像素间隔:150
},
亚克斯:{
标题:{
文本:“值”
},
绘图线:[{
值:0,
宽度:1,
颜色:'#808080'
}]
},
工具提示:{
格式化程序:函数(){
返回“+this.series.name+”
+
Highcharts.dateFormat(“%Y-%m-%d%H:%m:%S',this.x)+'
'+
数字格式(this.y,2);
}
},
图例:{
已启用:false
},
出口:{
已启用:false
},
系列:[{
名称:'随机数据',
数据:(函数(){
//生成一个随机数据数组
var数据=[],
时间=(新日期()).getTime(),
我
对于初学者来说,for(i=-19;i$(function(){});
与$(document).ready(function(){});
是相同的
on()
应应用于在任何时候都不会被替换的最近父元素
您可以简化您正在做的工作:
$.post({
"/dashboard/",
{ 'widgets_list' : widgets_list },
function(result){
console.log(widgets_list);
$("#column1").append(result); // div gets appended.
$('#live_graph').highcharts( /* ... rest of the init code */ );
}
});
这假设还有其他东西(比如一个按钮)将用于触发图表的创建
,您的代码将等到有响应时再创建图表。在创建图表之前调用append
,应确保元素存在,并且HighCharts可以查询该元素
您可能需要调整此设置以添加错误处理。还值得注意的是,如果您正在进行简单的查找,则使用GET with可能更容易…对于问题1-
将highChart函数代码放在常规函数中,并在ajax成功中添加div后调用它
$("#column1").make_highCharts();
请回答你的问题2
还有$(document).on(“ready”,handler),从jQuery 1.8开始就不推荐使用。这与ready方法的行为类似,但是如果ready事件已经触发,并且您尝试触发。on(“ready”)绑定的处理程序将不会执行。以这种方式绑定的ready处理程序将在上述其他三种方法绑定后执行。
对于在上的事件(事件
plz visit:on
用于委派事件处理程序,而不是运行任意函数。如果要在新元素上运行函数,只需在调用.append()后运行它
.yes在ajax中成功添加div后调用此high chart函数。它会起作用。@Barmar-我已经尝试过了。但它不起作用。@developerCK-尝试过。但没有起作用。$(“#column1”).append(result);generate_live_graph()
是$('#live#graph')。highcharts
在中不起作用“
没有发生。我已经用我尝试过的方法更新了我的问题。请用general function这个词来看看它,你的意思是函数abc(){$(function(){
然后在附加div后调用它?制作一个函数make_highCharts(),然后把代码放在$(document)里面。准备好(function(){…});请删除此$(函数(){$(文档).ready(函数(){Highcharts.setOptions({global:{useUTC:false}});并关闭最后一行});相同的错误!!TypeError:$(…)。generate_live_graph不是一个函数
得到它,调用这个generate_live_graph();b/c它不是jquery的插件,它是一个通用函数。不要像$()那样调用。生成_live_graph();
$.post({
"/dashboard/",
{ 'widgets_list' : widgets_list },
function(result){
console.log(widgets_list);
$("#column1").append(result); // div gets appended.
$('#live_graph').highcharts( /* ... rest of the init code */ );
}
});
$("#column1").make_highCharts();