click event not triggered on bootstrap modal
I am trying to catch the click event when save changes
is pushed.
For some reason i can't catch the click event.
Why?
<script>
$('#inviteRequest').click(function(){
// e.preventDefault();
console.log(1);
$('#myModalInviteDestination').modal('hide');
});
</script>
<!-- Modal -->
<div class="modal fade" id="myModalInviteDestination" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Enter your friends email address</h4>
</div>
<div class="modal-body">
<textarea rows="5" cols="68" name="invites"></textarea>
<div>use ; as delimiter</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="inviteRequest">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Answers
You need to wrap this in a document.ready:
$(function() {
$('#inviteRequest').click(function(){
console.log(1);
$('#myModalInviteDestination').modal('hide');
});
});
Your element #inviteRequest
does not exist at the time you try to add an event handler to it. You need to wait for the page to load first. My code is the equivalent to $(document).ready();
click event not triggered on bootstrap modal的更多相关文章
- Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上
问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...
- Bootstrap modal.js 源码分析
/* ======================================================================== * Bootstrap: modal.js v3 ...
- 对bootstrap modal的简单扩展封装
对bootstrap modal的简单扩展封装 参考自:http://www.muzilei.com/archives/677 注:原文不支持bootstrap新版本,并且居中等存在问题 此段时间 ...
- Bootstrap Modal 框 alert confirm loading
/** * Created by Administrator on 2016/5/4. */ /** * 模态窗口 */ window.Modal = { tpls:{ alert:'<div ...
- bootstrap插件学习-bootstrap.modal.js
bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...
- Bootstrap Modal 使用remote从远程加载内容
Bootstrap的Modal这个模态窗组件还是很好用的,但在开发的过程中模态窗中的内容大部分都是从后端加载的.要实现模态窗的内容是从后端加载话,常用的实现方式有2种.它们是: (1) ...
- bootstrap modal 垂直居中对齐
bootstrap modal 垂直居中对齐 文章参考 http://www.bubuko.com/infodetail-666582.html http://v3.bootcss.com/Jav ...
- 在bootstrap modal 中加载百度地图的信息窗口失效解决方法
这个问题其实很傻,解决方法没有任何技术含量,只是记录下工作中发生的事. 前阵子给一个汽车集团客户做了一个经销商查询系统,其中一个功能是使用地图标注经销商店面地址,并且实现导航功能. 页面演示地址:ht ...
- Bootstrap Modal 垂直方向加滚动条
原文链接:http://blog.csdn.net/cyh1111/article/details/52960747 背景 使用Bootstrap Modal实现用户资料修改,由于用户信息过多,默认M ...
随机推荐
- DEV Express中NavBarCointrol的使用
尚未对内容进行删减,内容有偏差和冗余,谨慎阅读. 发现在后面,写在前面: 13,之前在Default模式下,之所以很多Appearance属性都起不到作用,是因为Control的LookAndFeel ...
- .NET中的缓存实现
软件开发中最常用的模式之一是缓存,这是一个简单但非常有效的概念,想法是重用操作结果,执行繁重的操作时,我们会将结果保存在缓存容器中,下次我们需要该结果时,我们将从缓存容器中取出它,而不是再次执行繁重的 ...
- luogu2261 [CQOI2007]余数求和
除法分块. 猜想: 记 \(g(x)=\lfloor k / \lfloor k / x\rfloor \rfloor\),则对于 \(i \in [x,g(x)]\),\(\lfloor k / i ...
- unittest多线程生成报告(BeautifulReport)
前言 selenium多线程跑用例,这个前面一篇已经解决了,如何生成一个测试报告这个是难点,刚好在github上有个大神分享了BeautifulReport,完美的结合起来,就能生成报告了. 环境必备 ...
- robot framework常见错误:RIDE运行一次后不显示log
在使用RIDE进行web自动化测试时,会发现经常运行第二遍不显示下方log,如下 原因: 代码使用的是谷歌浏览器.IE浏览器测试,运行一次后chromedriver.exe,IEDriverServe ...
- Python内置函数—bytearray
英文文档: class bytearray([source[, encoding[, errors]]]) Return a new array of bytes. The bytearray cla ...
- HUD-1559 最大子矩阵,dp模拟
最大子矩阵 ...
- Problem 2121 神庙逃亡(FZU)
Problem 2121 神庙逃亡 Accept: 700 Submit: 1788 Time Limit: 1000 mSec Memory Limit : 32768 KB Prob ...
- HDU1711 最基础的kmp算法
Problem Description Given two sequences of numbers : a[1], a[2], ...... , a[N], and b[1], b[2], .... ...
- 【bzoj1055】[HAOI2008]玩具取名
[bzoj1055][HAOI2008]玩具取名 2014年12月1日3,0111 Description 某人有一套玩具,并想法给玩具命名.首先他选择WING四个字母中的任意一个字母作为玩具的基本名 ...