@宏哥 js父窗口事件触发问题

mark35 发布于 2013/07/29 10:35
阅读 757
收藏 2

就是我调用 $("#id",opener.document).change()的时候, 无法触发父窗口已经绑定的change事件. 实际上, 我直接在父窗口调用 $("#id").change()可以触发
@宏哥

我测试结果,子窗口可以操作父窗口内对象,但无法手动触发父窗口内对象绑定的事件,并且父窗口事件也不会冒泡

demo, 主页面:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="jquery.js"></script>
</head>
<body>

<input type=text id=a value=old />

<input type=text id=b value='click this' />

<script>
	$(document).ready(function() {
		$('#a').change(function() {
			console.log('a changed in main');
			fn_change();
		});
		$('#b').change(function() {
			console.log('b clicked in main');
			fn_change();
		});

		function fn_change() {
			console.log('a changed in main by fn call');
			$('#a').val('new');	
		}

		window.open('page.html');
	});

</script>

</body>
</html>
子窗口:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="jquery.js"></script>
</head>
<body >

<input type=button id=btn value='click me' name=btn >

<script>

	$('#btn').click(function() {
		console.log(window.opener.document);
		//$('#a', $(window.opener.document)).change();
		$(window.opener.document).find('#a').val('nnn');	// 可以更改'#a'的值,但事件不会冒泡
		$(window.opener.document).find('#b').val('ddd');	// 可以更改 '#b'的值,但事件不会冒泡触发#a上绑定的事件
		window.opener.fn_change();
	});

</script>

</body>
</html>
你的需求可以两种办法来解决:

1、直接在子窗口中修改对象值

2、在父窗口中把事件触发执行的代码写道一个函数内,然后在父窗口事件绑定回调函数中调用此函数;在子窗口中用 window.opener.function_name() 的方式去调用



加载中
0
宏哥
宏哥

opener.$("#Id").change();

这样就可以了, 调用父窗口,可以先获得父窗口句柄。

宏哥
宏哥
回复 @mark35 : 我感觉不是原生的问题。 是执行的上下文的问题。
mark35
mark35
看来有时候必须用原生js来操作
0
mark35
mark35

引用来自“宏哥”的答案

opener.$("#Id").change();

这样就可以了, 调用父窗口,可以先获得父窗口句柄。

后面这个change()没用的。

你执行

$(window.opener.document).find('#b').val('ddd').change();	// 可以更改 '#b'的值,但事件不会冒泡触发#a上绑定的事件
在父窗口日志不会执行
$('#b').change(function() {
			console.log('b clicked in main');
			fn_change();
		});
这个事件的
mark35
mark35
哦, window.opener.$('#b').val('ddd2').change(); // 这种方式就可以触发了 js真是。。。
0
宏哥
宏哥

$("#id',opener.document) 

opener.$("#id")

是不一样的, 它们的背景不一样。 这个change事件需要显式调用

默认是按照鼠标聚焦来触发的。 

mark35
mark35
是的,这两个的对象不同。前者是jquery对象,后者是js对象获得的jquery对象。主要是句柄不同
0
mark35
mark35

引用来自“mark35”的答案

引用来自“宏哥”的答案

opener.$("#Id").change();

这样就可以了, 调用父窗口,可以先获得父窗口句柄。

后面这个change()没用的。

你执行

$(window.opener.document).find('#b').val('ddd').change();	// 可以更改 '#b'的值,但事件不会冒泡触发#a上绑定的事件
在父窗口日志不会执行
$('#b').change(function() {
			console.log('b clicked in main');
			fn_change();
		});
这个事件的
@红薯 我编辑上面这个回复,在编辑器中把“后面这个change()没用的。”这句话加上了删除线,显示正常,提交之后删除线却消失了。
0
mark35
mark35

@宏哥

console.log($(window.opener.document).find('#b')[0] === window.opener.$('#b')[0]);  // true
的确是同一个对象,但不知道为何事件触发上不同


0
宏哥
宏哥

引用来自“mark35”的答案

@宏哥

console.log($(window.opener.document).find('#b')[0] === window.opener.$('#b')[0]);  // true
的确是同一个对象,但不直到为何事件触发上不同


它们对应的Dom 是一样的

但是执行的窗口背景(context)不一样。 

mark35
mark35
那就应该是jquery包装后上下文变化了
0
宏哥
宏哥
click 事件可以在子窗口触发, change只能在父窗口背景触发, 我也不知道为什么有这个区别。 
mark35
mark35
也可以从子窗口去触发父窗口对象的hide()事件。change()不行是否与冒泡机制(因为上下文的不同)有关呢
0
mark35
mark35

引用来自“宏哥”的答案

click 事件可以在子窗口触发, change只能在父窗口背景触发, 我也不知道为什么有这个区别。 
window.opener.$('#b').val('ddd2').change(); 这个在chrome下面无效的,难道是因为它采用多进程机制导致的?
0
宏哥
宏哥

引用来自“mark35”的答案

引用来自“宏哥”的答案

click 事件可以在子窗口触发, change只能在父窗口背景触发, 我也不知道为什么有这个区别。 
window.opener.$('#b').val('ddd2').change(); 这个在chrome下面无效的,难道是因为它采用多进程机制导致的?

我测试过可以。

但是我是直接用 opener.$("#id").change() 这样触发的。

其实val 是否改变都没有关系。 

mark35
mark35
我chrome版本是 28.0.1500.72 m。 IE10里面有效
0
VmLia
VmLia


当输入域发生变化时改变其颜色:

$(".field").change(function(){
  $(this).css("background-color","#FFFFCC");
});


定义和用法

当元素的值发生改变时,会发生 change 事件。

该事件仅适用于文本域(text field),以及 textarea 和 select 元素。

change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。

注释:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。

change是依赖焦点事件的。

@宏哥 @mark35  

VmLia
VmLia
回复 @mark35 : chrome对open直接就开始拦截了
mark35
mark35
回复 @JFree : 是的。实在复杂了还不如用(模态)弹出层来实现子窗口的功能。毕竟现在浏览器对弹窗都比较敏感容易拦截
VmLia
VmLia
回复 @mark35 : 是的,跨页面调用没必要搞这么复杂。
mark35
mark35
那看来与焦点有关的就会存在这个问题
VmLia
VmLia
回复 @宏哥 : 应该的应该的,我可是你的粉丝啊,呵呵
下一页
返回顶部
顶部