通过js产生的html内容的变化不能触发change动作和error动作,怎么破!

1514582970 发布于 2015/12/11 16:25
阅读 2K+
收藏 0

如题一段通过js添加的html内容,在其发生了error错误的时候不能触发error事件,如

<img class="headimg_img" src="./Public/Manage/photo/564e93466efec.jpg_310310.jpg" alt="">

这个标签是通过js添加到html中的,当这个标签的src地址无效(404)的时候不能触发error事件,但是原来的html标签中的img如果出现了404则会触发error事件,这种情况怎么办!

2.    <input type="text" name="username" value="" placeholder="真实姓名" required="">

这种标签,如果是用户自己填写的内容则会触发change事件,然而如果通过js改变了它的value则不能触发change事件,怎么办!?

目前仅仅遇到了则两个问题,请大神解释一下类似的情况应该怎么解决!?


加载中
3
wuyiw
wuyiw

1, 因为$('img')只包含了页面初始的几个img, 后来添加的img是不会自动添加并触发事件的, 所以得用jQuery的事件委托, 但是jQuery明确说明error事件不能用委托:

https://api.jquery.com/error/

测试一下, $(window).on('error', handler)能捕捉到js抛出的异常, 但捕捉不到img的error事件.

于是乎, 两种方法:

1), 在添加函数里处理error:

$('<img>', {
	src: 'imgSrc.jpg',
	error: function(e) {
		console.log('img error: ', e);
	}
});
// or
$('<img>', {
	src: 'imgSrc.jpg'
}).on('error', function(e) {
	console.log('img error: ', e);
});



2), 手动捕捉error并判断:

window.addEventListener('error', function(evt) {
	if (evt.target && evt.target.tagName==='IMG') {
		console.log('img error: ', evt);
	}
}, true);
$('<img>', {
	src: 'imgSrc.jpg'
}).appendTo('body');

注: 根据资料:

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror

img的error事件是不冒泡的, 所以要用capture: true.


推荐使用第一种, 因为在第二种方式里, 如果img先是被创建, 过一段时间(在浏览器已经请求src并得到404之后)再插入dom tree里, 那么window就捕捉不到error事件了, 因为error事件触发时img还不在dom tree里.(你可以检查evt.path来确认这一点)


2, 需要手动触发.假设你事件处理和改变值都通过jQuery, 那还是比较简单的, 加一个change()就行:

$(someInput).change(function() {/**/});
// ...
$(someInput).val(someValue).change(); // 改变值并触发处理函数



1514582970
1514582970
回复 @wuyiw : http://www.oschina.net/question/2539958_2145169?p=1#AnchorAnswer1060239大神我又有新问题了
1514582970
1514582970
回复 @wuyiw : 看下面的回复,字数太多不能再次回复了,怎么使用"引用此回帖?",提示的是让使用这个但是不知道"引用此回帖"在哪!
wuyiw
wuyiw
回复 @1514582970 : 和img error一样, 在添加函数里接上change事件处理函数.
1514582970
1514582970
回复 @wuyiw : 还有问题就是当input:text标签是通过js添加的的时候,当用户输入了值,不能触发change事件,怎么破!
wuyiw
wuyiw
回复 @1514582970 : evt.target/e.target就是img元素, $一下就是jQuery对象了. jQuery错误处理函数里的this也是img元素, 用$(this)方便些.
下一页
0
远游子
额。是这样的啊。既然是jsp生成的。是不是可以在生成之前检查一下目标文件是不是存在?(虽然不太聪明)
1514582970
1514582970
回复 @远游子 : JQuery
远游子
回复 @1514582970 : <html> <head> <script> function fuck(){ alert("fuck"); } </script> </head> <img src="as.jpg" onerror="fuck()"> </html> img 有 onerror 。你可以直接用。$('img')出来的结果是一个数组。怎么判断出结果。驴唇不对马嘴
远游子
回复 @1514582970 : 我眼瞎了- -对不住。。
1514582970
1514582970
回复 @远游子 : 这是一个什么东西?
1514582970
1514582970
js是javascrip的简写,不是jsp的简写 jsp不应该是jave文件么
下一页
0
大魔术师

1. 不知道你怎么写的js,我测试是可以。建议把代码贴出来看看。

2. 通过js改变了它的value, 不会产生event,所以只能直接用js调用input的change方法

1514582970
1514582970
回复 @远游子 : 额 你不认识么?
远游子
回复 @1514582970 : 我艹- -$('img')这是个啥啊。哥。
1514582970
1514582970
$('img').error(function(){ alert(5555); }); 最终没有弹出 页面初始的img标签出现错误,能弹出,但是后来我通过js有添加了几个img标签就不能弹出了
0
1514582970
1514582970
回复 @wuyiw : 意思是我通过$('.table2').append('<input type="text" name="phone[]"  wdf='required:"不能为空"|mobile:"手机号码格式不对!"'           value="" placeholder="手机" >');这个添加了一个name="phone[]"的输入框,我只需要$('input[name="phone"]').change();以下,这个输入框在用户变更内容的时候就会触发$('input[name="phone"]').change(function(){/*代码*/});了吗?
0
南湖船老大
南湖船老大
一句话,动态生成的dom是不能直接绑定事件的。
fyduan
fyduan
回复 @1514582970 : 使用事件委托,而不是绑定
1514582970
1514582970
那么问题来了!动态生成的dom怎么绑定事件
0
wuyiw
wuyiw

似乎你还是不太明白html的事件机制, 有空可以去了解一下.

// 这样添加input, 就可以在用户改变input后触发函数.
$('.table2').append($('<input type="text" name="phone[]"  wdf=\'required:"不能为空"|mobile:"手机号码格式不对!"\'           value="" placeholder="手机" >').change(function() {
	alert('changed: ' + this.value);
}));
// 或者用更优雅的委托方式:
$('.table2').on('change', 'input[name="phone[]"]', function() {
	alert('changed: ' + this.value);
});
$('.table2').append(...);
$('.table2').append(...);
$('.table2').append(...);
$('.table2').append(...);

// 如果需要js改变input值并触发change事件:
$(someInput).val(someVal).change();



返回顶部
顶部