实现一个依据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事件。相关推荐

  1. JS改变input的value值不触发onchange事件解决方案 (转)

    JS改变input的value值不触发onchange事件解决方案 (转) 参考文章: (1)JS改变input的value值不触发onchange事件解决方案 (转) (2)https://www. ...

  2. php如何动态为input赋值,input动态赋值后怎么触发change事件

    input经常用的事件有oninput与onchange oninput:事件在用户输入时触发. onchange:事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发 但是当我们给元素赋值时并 ...

  3. input 中文输入法额外触发change事件问题

    用ant mobile input 组件实现下面输入提示,提示添加click事件,input 添加change事件. 预期:点击提示项的时候,预期是只触发click事件. 实际:英文输入法正常,只触发 ...

  4. Input type=“file“上传文件change事件只触发一次解决方案

    Input type="file"上传文件change事件只触发一次解决方案 参考文章: (1)Input type="file"上传文件change事件只触发 ...

  5. 安卓微信浏览器使用input file图片上传无法触发change事件

    问题现象 项目中遇到一个上传图片的功能,使用了file作为选择上传,需要做图片预览等功能.在多方测试后没有问题,但在安卓微信浏览器中却发现change事件失效无法触发. 解决办法 由于在项目中我是用来 ...

  6. input中文输入多次触发oninput事件

    oninput事件在<input>或<textarea>元素的值发生改变时触发 onchange事件也是监听文本框变化后触发,不同的是oninput事件是立即(即时)触发,on ...

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

    1. onchange事件监听input值变化的使用方法: <input id="test"></input>$("input").ch ...

  8. onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)...

    转自:https://www.cnblogs.com/white0710/p/7338456.html 1. onchange事件监听input值变化的使用方法: <input id=" ...

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

    在网页上要操作文件通常会使用INPUT[type=file]控件,但这个控件的设计很蛋疼.它不像其它编程语言中文件选择后会触发一个事件,只是让上面的文字改变,而这个改变可能会触发change事件而已. ...

最新文章

  1. 基于双向LSTM和迁移学习的seq2seq核心实体识别
  2. Ganglia 调试技巧
  3. 深度学习教程 TensorFlow and Deep Learning Tutorials
  4. WinForm窗体缩放动画
  5. 【Linux病毒】腾讯云 cron、sshd 进程CPU占用超95%(亡命徒 Outlaw 僵尸网络攻击)问题排查及处理步骤
  6. python水平_python水平
  7. php函数传引用,关于php:函数调用通过引用传递?
  8. Hibernate 中upate,savaOrUpdate,merge的区别
  9. 聊聊restful和restframework
  10. ef core 批量update 非id_Entity Framework (EF) Core
  11. 基于Sklearn实现LDA算法
  12. 免费下载IOS/MAc付费软件
  13. 贪吃蛇小游戏制作(4)
  14. Marshmallow 的用法
  15. JDBC Mybatis 调用 ORACLE 存储过程 函数 返回 varray 类型 function return varray out varray
  16. Boss直聘使用技巧 – 求职面试 – 被面技巧
  17. pdcp层的作用_LTE系统中PDCP子层功能研究
  18. ethz_aslam_cv2(一) 简介
  19. 成功解决windows10连上了wifi但是没网的问题
  20. 计算机工程实践 课程大纲,《计算机专业》实习教学大纲.doc

热门文章

  1. SDUT 2766 小明传奇2
  2. 2009年1月5日 洛基网络教室听课笔记
  3. java 蓝桥杯算法训练 快速排序
  4. axios 超时_聊聊 Vue 中 axios 的封装
  5. mysql 表与表之间的条件比对_《MySQL数据库》关联查询
  6. 预约购票 php,正式上线!预约购票、参访攻略...你最关心的都在这!
  7. php读写xml文件,另辟蹊径 搞定PHP读取XML大文件 数据导入
  8. Spark源码分析之Worker启动通信机制
  9. (09)FPGA设计流程
  10. FPGA双沿发送之Verilog HDL实现