实现一个依据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事件。的更多相关文章

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

    方法(一)(转载的网络资料) 需要了解的知识     首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onprope ...

  2. file类型input框设置上传相同文件,并都可以触发change事件。

    在使用file类型input框是,删除了第一次上传到文件,再次上传相同文件,无法触发change事件,所以在删除的js上添加如下js代码: document.getElementById('fileU ...

  3. 改变input的值不会触发change事件的解决思路

    通常来说,如果我们自己通过 value 改变了 input 元素的值,我们肯定是知道的,但是在某些场景下,页面上有别的逻辑在改变 input 的 value 值,我们可能希望能在这个值发生变化的时候收 ...

  4. IE10 解决input file 同一文件不触发onchange事件

    if (window.ActiveXObject) { var reg = /10\.0/; var str = navigator.userAgent; if (reg.test(str)) { v ...

  5. js showModalDialog打开新的页面给原页面传值问题

    a.html中打开一个新页面b.html,b.html页面给a.html中的input传一个值并将value赋给input框. a.html: <html>  <head>   ...

  6. jQuery子页面获取父页面元素并绑定事件

    父页面HTML文件: <ul id="faul"> <li class="sonli">子页面列表1</li> <li ...

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

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

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

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

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

    最近开发一个项目,需要实现用户在WEB表单里的多个INPUT框中输入数量后,立即自动计算加总各项输入的数量之和,并显示在指定的INPUT框中,这个功能实现的原理是简单的,就是只需要在INPUT的onc ...

随机推荐

  1. Extjs 4学习2

    主要学习采自:http://www.ishowshao.com/blog/2012/06/19/extjs-4-getting-started/ 用的sdk为extjs4.2.1 根据其中的提示装了一 ...

  2. Idea中运行Testng时,报SAXParseException:parallel为none的问题原因及解决

    今天更新了testng的版本为6.9.10, 在idea中运行测试案例时,报错如下: org.testng.TestNGException: org.xml.sax.SAXParseException ...

  3. Chrome 中的彩蛋——T-Rex

    今天,从网页上看到chrome的T-Rex的彩蛋,眨眼间完了10分钟.分享出来,只是好玩. 当 Chrome 无法连接到互联网时,或者上着网突然掉线,刷新页面时报错,我们都会看到T-Rex的身影,没错 ...

  4. .htaccess内容

    <IfModule mod_rewrite.c> Options +FollowSymlinks RewriteEngine On RewriteCond %{REQUEST_FILENA ...

  5. PHP调试工具Xdebug安装配置教程

    说道PHP代码调试,对于有经验的PHPer,通过echo.print_r.var_dump函数,或PHP开发工具zend studio.editplus可解决大部分问题,但是对于PHP入门学习的童鞋来 ...

  6. 会声会影X6-高级运动等效果的练习实践-与您分享...

          视频片说明:我在学习X6的视频教程后,做了针对性练习与实 践,我所用的素材取于网络世界-百度下载,视频中的效果有,高级运动;平移缩放,分屏效果,<运用:关键帧,缩放,旋转,加相框,倒 ...

  7. centos 6.5 安装weixin

    下载cpanm wget http://xrl.us/cpanm --no-check-certificate -O /sbin/cpanm && chmod +x /sbin/cpa ...

  8. C++ primer读书笔记 chapter3 标准库类型

    除第二章介绍的是C++的基本类型,本章将大致介绍一下C++定义的内容丰富的抽象数据库类型标准库.着重介绍一下sting.vector和bitset. 3.2标准库string类型 1.string类型 ...

  9. P2032 「Poetize9」升降梯上

    描述 开启了升降梯的动力之后,探险队员们进入了升降梯运行的那条竖直的隧道,映入眼帘的是一条直通塔顶的轨道.一辆停在轨道底部的电梯.和电梯内一杆控制电梯升降的巨大手柄.Nescafe之塔一共有N层,升降 ...

  10. AJAX 中Sys.WebForms.PageRequestManager的事件激发顺序 《转》

    AJAX 中Sys.WebForms.PageRequestManager的事件激发顺序 测试代码: 测试代码如下: <%@ Page Language="C#" AutoE ...