无法处理来自引导弹出窗口内容的事件
Cannot handle events from the content of a bootstrap popover
我需要把一些动态内容在一个引导弹出窗口与多个事件处理,但没有一个被触发。例如:
HTML:<span id="popover" class="btn btn-default">
Popover
<div class="content hide">
<form id="form">
<input type="text" class="form-control"/>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<button id="cancel" type="button" class="btn btn-default">Cancel</button>
</div>
</span>
Javascript: $('#popover').popover({
html: true,
placement: 'bottom',
content: function () {
return $(this).parent().find('.content').html();
}
});
$('#popover').on('shown.bs.popover', function () {
$('#form').submit(function (e) { // never called
e.preventDefault();
alert('Form submitted');
});
$('#cancel').click(function () { //never called
$('#popover').popover('hide');
alert('popover closed');
});
});
JS小提琴:http://jsfiddle.net/yddRB/
尝试委派一个cancel和submit事件,如下所示:
为取消$(document.body).on('click',"#cancel",function () {
$('#popover').popover('hide');
alert('popover closed');
});
为提交$(document.body).on('submit','#form',function (e) {
e.preventDefault();
alert('Form submitted');
});
事件委托允许我们在父元素上附加一个事件监听器,它将为所有匹配选择器的后代触发,无论这些后代现在存在还是将来添加。
更新小提琴
相关文章:
- 正在尝试处理子窗口上的关闭窗口事件
- 通过防止窗口事件问题防止双重提交
- 收听Angularjs服务中的窗口事件
- 跨浏览器窗口事件
- 谷歌地图信息窗口事件打开
- 有没有办法先触发窗口事件
- 流星 - 谷歌地图信息窗口事件未触发
- 如何在角度中正确解绑窗口事件
- Chrome扩展程序:检测从后台创建窗口事件
- 窗口事件在FireFox中不起作用
- 自定义确认框,该框具有关闭窗口事件的某些功能
- 自动创建并触发窗口事件
- 如何在JQuery 1.9中获取所有窗口事件
- 窗口事件的JQuery函数:组合加载和调整大小
- 窗口.事件不能在firefox上工作
- Firefox扩展中的打开窗口事件
- 在Javascript中,我如何解除绑定一个窗口事件
- React.js关于监听组件窗口事件的最佳实践
- 如何使用Backbone-Views检测窗口事件?
- jQuery的窗口事件函数(加载和调整大小)