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'); //有效
});
iframe页面改动parent页面的隐藏input部件value值,不能触发change事件。的更多相关文章
- JS改变input的value值不触发onchange事件解决方案 (转)
方法(一)(转载的网络资料) 需要了解的知识 首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onprope ...
- file类型input框设置上传相同文件,并都可以触发change事件。
在使用file类型input框是,删除了第一次上传到文件,再次上传相同文件,无法触发change事件,所以在删除的js上添加如下js代码: document.getElementById('fileU ...
- 改变input的值不会触发change事件的解决思路
通常来说,如果我们自己通过 value 改变了 input 元素的值,我们肯定是知道的,但是在某些场景下,页面上有别的逻辑在改变 input 的 value 值,我们可能希望能在这个值发生变化的时候收 ...
- IE10 解决input file 同一文件不触发onchange事件
if (window.ActiveXObject) { var reg = /10\.0/; var str = navigator.userAgent; if (reg.test(str)) { v ...
- js showModalDialog打开新的页面给原页面传值问题
a.html中打开一个新页面b.html,b.html页面给a.html中的input传一个值并将value赋给input框. a.html: <html> <head> ...
- jQuery子页面获取父页面元素并绑定事件
父页面HTML文件: <ul id="faul"> <li class="sonli">子页面列表1</li> <li ...
- onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)
转自:https://www.cnblogs.com/white0710/p/7338456.html 1. onchange事件监听input值变化的使用方法: <input id=" ...
- INPUT[type=file]的change事件不触发问题
在网页上要操作文件通常会使用INPUT[type=file]控件,但这个控件的设计很蛋疼.它不像其它编程语言中文件选择后会触发一个事件,只是让上面的文字改变,而这个改变可能会触发change事件而已. ...
- 关于解决JQUERY对INPUT元素Change事件不兼容的问题
最近开发一个项目,需要实现用户在WEB表单里的多个INPUT框中输入数量后,立即自动计算加总各项输入的数量之和,并显示在指定的INPUT框中,这个功能实现的原理是简单的,就是只需要在INPUT的onc ...
随机推荐
- GridBagLayout的帮助类
自备详细注释 /* * To change this license header, choose License Headers in Project Properties. * To change ...
- 子元素的margin-top影响父元素原因和解决办法
这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means tha ...
- [转] 使用CSS3 will-change提高页面滚动、动画等渲染性能 ---张鑫旭
一.先来看一个例子 下面这个例子来自某外文,我这里简单转述下. 视差滚动现在不是挺流行的嘛,然后Chris Ruppel当其使用background-attachment: fixed实现背景图片不随 ...
- HTML5 拖拽 & fabric 插件
### 拖拽 //html <div ondrop="drop(event)" ondragover="allowDrop(event)">< ...
- YII 小部件 解决多选按钮和单选按钮不在同一水平上 'separator'=>' '
主要是添加separator属性(这里)$hoddy,$sex在控制器里面定义的数组,然后render传过来的 <td> <?php echo $form-> ...
- 转:简单介绍 P3P 技术
原文来自于:http://blog.csdn.net/ghj1976/article/details/4889219 以 Internet Explorer 为例,默认情况下,IE的隐私策略如下图所设 ...
- matlab 全部的随机数函数
matlab 全部的随机数函数 (一)Matlab内部函数 a. 基本随机数 Matlab中有两个最基本生成随机数的函数. 1.rand() 生成(0,1)区间上均匀分布的随机变量.基本语法: ran ...
- python operator模块
官网:https://docs.python.org/3.4/library/operator.html http://pymotw.com/2/operator/
- Hibernate 配置详解(3)
7) hibernate.max_fetch_depth: 该属性用于设置left out join单对象查询关系(one-to-one/many-to-one)中最大的关联深度.默认值为0,即默认情 ...
- ♫【HTML5 敏捷实践】第1章 使用语义化的方式实现
<!DOCTYPE html> 向后兼容的HTML5<doctype>标签.HTML5规范规定<doctype>对大小写不敏感:然而,之前版本的HTML需要< ...