iframe页面改动parent页面的隐藏input部件value值,不能触发change事件。

实现一个依据iframe页面返回充值卡类型不同,安排不同的input部件。

点击选择弹出一个iframe。点击充值卡数据行。返回1、充值卡类型。2、充值卡id(用的UUID)。3、充值卡号(字符串)。

遇到的问题是当iframe选择充值卡时,无法获取parent页面input部件value值的change事件。

parent页js

$("#id_card_type").change(function(){
//事件无法捕获
});

parent页form

<form id="frm" method="post" action="/bill/recharge/new/">
  <input id="id_card_type" name="card_type" type="hidden" />
  <input id="id_card_id" name="card_id" type="hidden" />
  <label>卡号</label><input id="id_cardno" name="cardno" readonly="True" type="text" />
  <span id="btnSelectCard" >选择</span>
</form>

iframe页js

$(this).children().click(function(){
<span style="white-space:pre">	</span>var cid=$(this).parent('tr').attr('item_id');
	var cn=$(this).parent('tr').children('td').eq(0).html();
	var ct=$(this).parent('tr').attr('item_type');
	$('#id_card_id', window.parent.document).val(cid);
	$('#id_cardno', window.parent.document).val(cn);
	$('#id_card_type', window.parent.document).val(ct);

});

解决例如以下:

iframe页js

$(this).children().click(function(){
  var cid=$(this).parent('tr').attr('item_id');
  var cn=$(this).parent('tr').children('td').eq(0).html();
  var ct=$(this).parent('tr').attr('item_type');
  $('#id_card_id', window.parent.document).val(cid);
  $('#id_cardno', window.parent.document).val(cn);
  $('#id_card_type', window.parent.document).val(ct);
  //$('#id_card_type', window.parent.document).trigger('change'); //无效
  window.parent.$('#id_card_type').trigger('change'); //有效
});
时间: 2025-01-04 04:26:24

iframe页面改动parent页面的隐藏input部件value值,不能触发change事件。的相关文章

iframe页面修改parent页面的隐藏input部件value值,不能触发change事件。

实现一个根据iframe页面返回充值卡类型不同,安排不同的input部件. 点击选择弹出一个iframe,点击充值卡数据行,返回1.充值卡类型.2.充值卡id(用的UUID).3.充值卡号(字符串). 遇到的问题是当iframe选择充值卡时,无法获取parent页面input部件value值的change事件. parent页js $("#id_card_type").change(function(){ //事件无法捕获 }); parent页form <form id=&qu

解决input file两次选择相同文件不触发change事件的问题

当第一次选择图片1时,input的change事件触发,因为input的value从无变成图片1,value值发生了改变, 此时: 如果第二次选择图片2时,input的change事件触发,因为input的value从图片1变成图片2,value值发生了改变, 如果第二次选择图片1时,input的change事件不会触发,因为input的value值依然为图片1,value值没有发生改变,如果第二次不做文件选择,而是点击的取消的话,change事件触发,因为value值被清空, 我的解决方案是i

onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法

1. onchange事件监听input值变化的使用方法: <input id="test"></input> $("input").change(function(){ alert("aaa"); } 2. 网页开发时,如果有input隐藏域,通过js改变隐藏域的值,无法触发change事件. 原因:onchange事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发. 解决方法:在这种情况下,可以在改变隐藏域的值

INPUT[type=file]的change事件不触发问题

在网页上要操作文件通常会使用INPUT[type=file]控件,但这个控件的设计很蛋疼.它不像其它编程语言中文件选择后会触发一个事件,只是让上面的文字改变,而这个改变可能会触发change事件而已.对于文字没改变的选择,change事件则不会触发. 当INPUT[type=file]控件上已经选择过一次文件之后,再次点击它选择同一个文件时change事件就不会触发.因为第二次选择后里面的文字和第一次是一样的,没有改变.还有个更蛋疼情况是有些浏览器会自动记住控件上的文字,即使页面关闭后重新打开还

以input=file方式,获取文件时,在IE下8无法通过某个按钮click事件间接触发input=file的change事件

最近在项目中遇到了许多上传问题,公司内部的组件,通过form上传,需要使用input=file触发选择文件, 因为input=file在各个浏览器中显示的样式是不同的,谷歌,火狐,IE都有所不同,而且不太美观,所以为了解决 这一个问题,一开始采用了隐藏input=file 然后通过一个显示的button间接触发input=file的click事件如下 <input type="file" id="upload" style="display:none

实时监测input控件value值动态变化的事件

目录 [1]input [2]propertychange [3]兼容处理 前面的话 HTML5为input控件新增了很多type属性,大大增加了input控件的应用场景.其中一个是type="range"的input控件,可以通过拖动游标改变value值,但并不是所有浏览器都可以实时显示,除了IE10+浏览器 说到改变value值的事件,首先想到的便是change事件,但change事件的触发条件是失去焦点并且value值改变.而游标拖动并没有失去焦点.所以,change事件并不能达

关于解决JQUERY对INPUT元素Change事件不兼容的问题

最近开发一个项目,需要实现用户在WEB表单里的多个INPUT框中输入数量后,立即自动计算加总各项输入的数量之和,并显示在指定的INPUT框中,这个功能实现的原理是简单的,就是只需要在INPUT的onchange事件中计算加总并将结果赋给指定的INPUT框中即可实现,代码如下: $("input.syxcost").change(function(){ computeReceivedsyxcost(); } function computeReceivedsyxcost(){ //计算加

JQuery iframe页面通过parent方法操作父页面中的元素与方法(实例讲解)

1)在iframe中查找父页面元素的方法: $('#id', window.parent.document) 2)在iframe中调用父页面中定义的方法和变量: parent.method parent.value 3)实例 1.父页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="If

Iframe父页面与子页面之间的相互调用

iframe元素就是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者iframe标签),浏览器就会为原始文档创建一个window对象,再为每个iframe创建额外的window对象,这些额外的window对象是原始窗口的子窗口. contentWindow: 是指指定的iframe或者iframe所在的window对象 Demo1 父页面fu.html: <!DOCT