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'); //有效
});
转载于:https://www.cnblogs.com/mengfanrong/p/5254158.html
iframe页面改动parent页面的隐藏input部件value值,不能触发change事件。相关推荐
- JS改变input的value值不触发onchange事件解决方案 (转)
JS改变input的value值不触发onchange事件解决方案 (转) 参考文章: (1)JS改变input的value值不触发onchange事件解决方案 (转) (2)https://www. ...
- php如何动态为input赋值,input动态赋值后怎么触发change事件
input经常用的事件有oninput与onchange oninput:事件在用户输入时触发. onchange:事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发 但是当我们给元素赋值时并 ...
- input 中文输入法额外触发change事件问题
用ant mobile input 组件实现下面输入提示,提示添加click事件,input 添加change事件. 预期:点击提示项的时候,预期是只触发click事件. 实际:英文输入法正常,只触发 ...
- Input type=“file“上传文件change事件只触发一次解决方案
Input type="file"上传文件change事件只触发一次解决方案 参考文章: (1)Input type="file"上传文件change事件只触发 ...
- 安卓微信浏览器使用input file图片上传无法触发change事件
问题现象 项目中遇到一个上传图片的功能,使用了file作为选择上传,需要做图片预览等功能.在多方测试后没有问题,但在安卓微信浏览器中却发现change事件失效无法触发. 解决办法 由于在项目中我是用来 ...
- input中文输入多次触发oninput事件
oninput事件在<input>或<textarea>元素的值发生改变时触发 onchange事件也是监听文本框变化后触发,不同的是oninput事件是立即(即时)触发,on ...
- onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法
1. onchange事件监听input值变化的使用方法: <input id="test"></input>$("input").ch ...
- 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事件而已. ...
最新文章
- 基于双向LSTM和迁移学习的seq2seq核心实体识别
- Ganglia 调试技巧
- 深度学习教程 TensorFlow and Deep Learning Tutorials
- WinForm窗体缩放动画
- 【Linux病毒】腾讯云 cron、sshd 进程CPU占用超95%(亡命徒 Outlaw 僵尸网络攻击)问题排查及处理步骤
- python水平_python水平
- php函数传引用,关于php:函数调用通过引用传递?
- Hibernate 中upate,savaOrUpdate,merge的区别
- 聊聊restful和restframework
- ef core 批量update 非id_Entity Framework (EF) Core
- 基于Sklearn实现LDA算法
- 免费下载IOS/MAc付费软件
- 贪吃蛇小游戏制作(4)
- Marshmallow 的用法
- JDBC Mybatis 调用 ORACLE 存储过程 函数 返回 varray 类型 function return varray out varray
- Boss直聘使用技巧 – 求职面试 – 被面技巧
- pdcp层的作用_LTE系统中PDCP子层功能研究
- ethz_aslam_cv2(一) 简介
- 成功解决windows10连上了wifi但是没网的问题
- 计算机工程实践 课程大纲,《计算机专业》实习教学大纲.doc