Dom jquery.on（）事件处理程序未在动态添加的$element上触发
为了说明我的问题，我创建了一个JSFIDLE页面 为什么在面板滑动后警报功能没有启动？点击标有“swiperee”的灰色框，观看灰色面板滑入。然后点击标有“swiperee2”的按钮。没有什么。应引起警报：( 由于当您单击“swiperee”灰色按钮时，第一个面板会滑动，因此我看不出第二个灰色按钮“swiperee2”没有理由不处理其.on（）事件-其生成方式相同 谢谢 编辑： Gabe下面的回答并不完全正确。首先，他的代码使用的是.on（）事件列表，不是事件映射，而是语法。他的观点是，事件应该被委派，因为我正在动态添加元素 实际上，我不确定这是不是正确的想法，因为我已经加载了所有元素，它们只是没有显示出来——这里没有ajax。所发生的只是元素在DOM层次结构中移动 下面是根据请求从上面的JSFIDLE中获得的示例代码Dom jquery.on（）事件处理程序未在动态添加的$element上触发,dom,dynamic,jquery,Dom,Dynamic,Jquery,为了说明我的问题，我创建了一个JSFIDLE页面 为什么在面板滑动后警报功能没有启动？点击标有“swiperee”的灰色框，观看灰色面板滑入。然后点击标有“swiperee2”的按钮。没有什么。应引起警报：( 由于当您单击“swiperee”灰色按钮时，第一个面板会滑动，因此我看不出第二个灰色按钮“swiperee2”没有理由不处理其.on（）事件-其生成方式相同 谢谢 编辑： Gabe下面的回答并不完全正确。首先，他的代码使用的是.on（）事件列表，不是事件映射，而是语法。他的观点是，事件应
$(function(){
var g = {
func : {
swipeLeft : function($el)
{
$RIGHT = $('<div id="right">')
.appendTo('body')
.addClass('scrollable hwaccel')
.css({
'position' : 'absolute',
'z-index' : '2',
'top' : '0px',
'left' : '640px',
'width' : '640px',
'height' : '960px',
'border' : '1px solid #ccf'
})
;
$el.appendTo($RIGHT);
$('#right, #main').animate(
{
left : '-=640px'
},
500,
function(){
$MAIN.empty();
$el.appendTo($MAIN);
$MAIN.css('left','0px');
$RIGHT.remove();
}
);
}
}
};
$MAIN = $('<div id="main">')
.appendTo('body')
.addClass('scrollable hwaccel')
.css({
'position' : 'absolute',
'z-index' : '1',
'top' : '0px',
'left' : '0px',
'width' : '640px',
'height' : '960px',
'border' : '1px solid #009'
})
;
$start = $('<div id="start">')
.appendTo($MAIN)
.css({
'position' : 'absolute',
'top' : '0px',
'left' : '0px',
'width' : '640px',
'border' : '1px solid #900'
})
.html(
'hello<br/>456'
)
.append(
$('<div id="swiperee">')
.css({
'position' : 'absolute',
'top' : '10px',
'left' : '10px',
'width' : '100px',
'height' : '40px',
'background': '#ccc',
'cursor' : 'pointer'
})
.html('swiperee')
.on({
click : function(){
g.func.swipeLeft($next);
}
})
)
;
$next = $('<div id="next">')
.css({
'position' : 'absolute',
'top' : '0px',
'left' : '0px',
'width' : '640px',
'height' : '960px',
'background': '#ddd'
})
.html(
'sdfjkgh sdklfjgh sdklfjgh skldfj ghskldjgh'
)
.append(
$('<div id="swiperee2">')
.css({
'position' : 'absolute',
'top' : '10px',
'left' : '10px',
'width' : '100px',
'height' : '40px',
'background': '#ccc',
'cursor' : 'pointer'
})
.html('swiperee2')
.on({
click : function(){
alert('sdf');// WHY DOES NOT CALL??
}
})
)
;
});
$（函数（）{
变量g={
func:{
swipeLeft:函数（$el）
{
$RIGHT=$（''）
.appendTo（'正文'）
.addClass（'可滚动的hwaccel'）
.css({
'位置'：'绝对'，
“z索引”：“2”，
“顶部”：“0px”，
“左”：“640px”，
“宽度”：“640px”，
“高度”：“960px”，
“边框”：“1px实心#ccf”
})
;
$el.appendTo（$RIGHT）；
$（“#右，#主”）。设置动画(
{
左：'-=640px'
},
500,
函数（）{
$MAIN.empty（）；
$el.appendTo（$MAIN）；
$MAIN.css（'left'，'0px'）；
$RIGHT.remove（）；
}
);
}
}
};
$MAIN=$（''）
.appendTo（'正文'）
.addClass（'可滚动的hwaccel'）
.css({
'位置'：'绝对'，
“z索引”：“1”，
“顶部”：“0px”，
“左”：“0px”，
“宽度”：“640px”，
“高度”：“960px”，
‘边框’：‘1px实心#009’
})
;
$start=$（''）
.appendTo（$MAIN）
.css({
'位置'：'绝对'，
“顶部”：“0px”，
“左”：“0px”，
“宽度”：“640px”，
“边框”：“1px实心#900”
})
.html(
“你好
456”
)
.附加(
$('')
.css({
'位置'：'绝对'，
“顶部”：“10px”，
“左”：“10px”，
“宽度”：“100px”，
“高度”：“40px”，
“背景”：“ccc”，
“游标”：“指针”
})
.html（'swiperee'）
.在({
单击：函数（）{
g、 函数swipeLeft（$next）；
}
})
)
;
$next=$（''）
.css({
'位置'：'绝对'，
“顶部”：“0px”，
“左”：“0px”，
“宽度”：“640px”，
“高度”：“960px”，
“背景”：“ddd”
})
.html(
“sdfjkgh sdklfjgh sdklfjgh skldfj ghskldjgh”
)
.附加(
$('')
.css({
'位置'：'绝对'，
“顶部”：“10px”，
“左”：“10px”，
“宽度”：“100px”，
“高度”：“40px”，
“背景”：“ccc”，
“游标”：“指针”
})
.html（'swipere2'）
.在({
单击：函数（）{
警报（'sdf'）；//为什么不调用？？
}
})
)
;
});
问题在于动画回调中的行
$MAIN.empty（）.empty（）