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 ...
随机推荐
- solrJ 查询参数
一. Query参数 1. CoreQueryParam查询的参数 1) q: 查询字符串,必须的. 2) q.op: 覆盖schema.xml的defaultOperator(有空格时用" ...
- NYOJ 1875 畅通工程再续 (无节点间距离求最小生成树)
Description 相信大家都听说一个“百岛湖”的地方吧,百岛湖的居民生活在不同的小岛中,当他们想去其他的小岛时都要通过划小船来实现.现在政府决定大力发展百岛湖,发展首先要解决的问题当然是交通问题 ...
- Oracle数据库学习之存储过程--提高程序执行的效率
存储过程是Oracle开发者在数据转换或查询报表时经常使用的方式之一.它就是想编程语言一样一旦运行成功,就可以被用户随时调用,这种方式极大的节省了用户的时间,也提高了程序的执行效率.存储过程在数据库开 ...
- 【02】GitHub 工具 Octotree
#推荐一个 GitHub 工具 Octotree Chrome extension 它可以让你在看任何仓库时,获得一个左边的树状图.
- 【07】QQ群管理公告小结:
[07]QQ群管理公告小结: 01,请看公告遵守相关规定. 02,群内除QQ自带的缺省表情外(不是QQ的VIP或大图表情),禁止发送大表情,大图片(展示问题的屏幕截图除外), 03,修改群名片 ...
- 关于面试总结-python笔试题(递归)
前言 本篇继续收集一些常见的python笔试题,以基础知识为主,递归是面试最喜欢考的一个问题,不管是做开发还是测试,都无法避免考递归.本篇结合实际案例,讲下几种关于递归的场景. 计算n的阶乘 计算n! ...
- BootStrap学习01框架搭建
中文文档:https://v3.bootcss.com/css/ 开发工具 WebStorm 一.新建项目08bootstrap 引入bootstrap-3.3.7,引入jQuery,引入holder ...
- jsp页面遍历输出
<c:foreach>类似于for和foreach循环 以下是我目前见过的用法: 1.循环遍历,输出所有的元素.<c:foreach items="${list}" ...
- 74. Spring Data JPA方法定义规范【从零开始学Spring Boot】
[从零开始学习Spirng Boot-常见异常汇总] 事情的起因:有人问过我们这个这个问题:为什么我利用Spring data jpa写的方法没有按照我想要的情况进行执行呢?我记得当时只是告诉他你你先 ...
- Go map基础
package main import "fmt" //Map //创建:make(map[string]int) //获取元素: m[key] //key不存在时,获得value ...