第一个file在change时,是能够触发事件的,而第二插入的file则没有change事件。对于这个问题,有如下两种解决方法:

第一种是将绑定change事件封装成一个函数,在点击button按钮插入file控件之后,调用这个函数。如下:

<script type="text/javascript">
$(function(){
function fileChange(){
$('input[type ="file"]').change(function(){
console.log($(this).val())
if($(this).val() == ""){
alert("你好")
}
})
}
fileChange();
$('input[type ="button"]').click(function(){
$("#content").append('<input type="file"/>');
fileChange();
})
})
</script>

另一种方式,是在DOM加载之后和DOM内容发生改变时,绑定file控件的change事件,如下:

<script type="text/javascript">  

    window.onload,window.onchange = function(){
$('input[type ="file"]').change(function(){
console.log($(this).val() )
if($(this).val() == ""){
alert("你好")
}
})
} $('input[type ="button"]').click(function(){
$("#content").append('<input type="file"/>')
}) </script>

DOM变化后事件绑定失效的更多相关文章

  1. jQuery学习笔记之DOM操作、事件绑定(2)

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  2. 动态创建的DOM元素进行事件绑定

    http://files.cnblogs.com/files/xsmhero/jquery.livequery.js <script type="text/javascript&quo ...

  3. JQ动态生成的元素,原事件绑定失效

    Old Code: $('code').click(function () { console.log($(this).text()); }); New Code:(.container 是<c ...

  4. ExtJs之DHTML,DOM,EXTJS的事件绑定区别

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  5. MutationObserver DOM变化的观察

    简单的给MutationObserver做个测试及总结笔记. MutationObserver,window上的一个(构造)函数,可以通过其创建的观察者(观察对象)达到观察DOM的变化的效果. 可适用 ...

  6. JS三个事件绑定方法

    1. JS三个事件绑定方法 1.1. 使用html进行事件绑定 1.直接在html标签上写入事件类型和事件处理方法. <button onclick = "alert('hello w ...

  7. DOM操作标签,事件绑定,jQuery框架

    DOM操作标签 ''' 在起变量名的时候 如果该变量指向的是一个标签 那么建议使用 xxxEle eg:aEle\pEle\divEle\spanEle ''' 基本使用 动态创建一个标签 var 变 ...

  8. 原生andriod浏览器回退后dom(click)事件全体失效问题探究

    问题描述 今天同事遇到一个神一样的BUG: 在原生浏览器下,为dom元素绑定一个click事件,其中有个a标签外链,点击a后进入其他页面,点击浏览器后退后,页面点击事件全体失效! 我于是用ios测了下 ...

  9. jQuery--事件, 事件绑定, 阻止事件冒泡, 事件委托,页面载入后函数

    1.常用事件, 按住shift键实现同步选择效果,搜索框联想效果 2.阻止事件冒泡 3.事件委托 4.使用 $(document).ready(function (){...}) 实现文件加载完绑定事 ...

随机推荐

  1. 酷狗音乐快速转换MP3格式的方法

    喜欢听音乐的朋友们,散步跑步的时候都是随身听,音乐可以给人带来力量,让人心情愉悦,有时候甚至还可以让我们忘记烦恼和忧愁,是一种不错的解压方式,所以热爱运动的宝宝们是离不来音乐的陪伴的,这样说来随身听的 ...

  2. springmvc @ResponseBody HttpMediaTypeNotAcceptableException

    2019独角兽企业重金招聘Python工程师标准>>> [ERROR]org.springframework.web.HttpMediaTypeNotAcceptableExcept ...

  3. 手把手教你用Rancher创建产品质量数据库设置

    目标:在本文中,我们将介绍如何运行一个分布式产品质量数据库设置,它由Rancher进行管理,并且保证持久性.为了部署有状态的分布式Cassandra数据库,我们将使用Stateful Sets (有状 ...

  4. 如何在Vue项目中优雅的使用swiper插件

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! 开始之前,请先确保有一个基于webpack模板的项目(vue-cli脚手架 ...

  5. 【Hexo】使用Hexo+github pages+travis ci 实现自动化部署

    目录 一.说明 二.成品展示 三.前期准备 本地安装 node.js 本地安装 git github 账号 创建仓库 travis ci 账号 四.安装 Hexo 五.使用 hexo 搭建博客 六.部 ...

  6. libevent(十)bufferevent 2

    接上文libevent(九)bufferevent 上文主要讲了bufferevent如何监听读事件,那么bufferevent如何监听写事件呢? 对于一个fd,只要它的写缓冲区没有满,就会触发写事件 ...

  7. 关于MySQL数据库的卸载

    首先对于MySQL这款数据库来讲,不能简单的卸载就草草了事,我们首先在mysql的文件下面找到my.ini这个文件, 在其中找到mysql数据库所产生的data文件,这个文件一般在c盘的一个隐藏目录下 ...

  8. Spring学习笔记(八)Spring Data JPA学习

    ​ jpa简单的命名规则如下,这个不多做介绍,放在这里也是给自己以后查找起来方便,这篇文章主要介绍之前一直忽略了的几个点,像@NoRepositoryBean这个注解,以及怎么自定义Repositor ...

  9. db连接池

    目前常用的连接池有: DBCP:org.apache.commons.dbcp.BasicDataSource dataSource: 要连接的 datasource (通常我们不会定义在 serve ...

  10. iOS开发--性能调优记录

    CPU VS GPU 关于绘图和动画有两种处理的方式:CPU(中央处理器)和GPU(图形处理器).但是由于历史原因,我们可以说CPU所做的工作都在软件层面,而GPU在硬件层面 对于图像处理,通常用硬件 ...