实现一个依据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. HTML5拖放API

    拖放事件事件提供了拖放可以控制几乎所有方面的拖放操作.棘手的部分是确定每个事件触发:在拖项目火:别人火下降的目标.拖动项时,以下事件(按照这个顺序): 拖曳开始拖dragend此刻你把鼠标按钮和开始移 ...

  2. TatukGIS-TGIS_Editor.CreateShape

    procedure CreateShape(const _layer: TObject; const _ptg: TGIS_Point3D; const _type: TGIS_ShapeType; ...

  3. [r]Setting up Django and your web server with uWSGI and nginx

    Setting up Django and your web server with uWSGI and nginx This tutorial is aimed at the Django user ...

  4. 如何在js文件中实现获取request.getCotextPath();

    我们在jsp中可以方便的使用“request.getCotext()”来获取工程的根目录. 但是如果我们的js代码存在一个单独的js文件中,这时候再想获取根目录,我们就要自己截取了.可以采用下面的方式 ...

  5. Windows开发技术的历史

    原文地址:http://www.kuqin.com/windows/20090315/40172.html Windows已经有22年的历史,这22年来,微软官方主力推行的编程语言与API有四个分水岭 ...

  6. ubuntu wubi安装注意事项

    从这个镜像下载 http://mirrors.163.com/ubuntu-releases/12.10/ ubuntu-12.10-desktop-amd64.iso 和 wubi.exe然后放到同 ...

  7. BZOJ 3572 世界树

    Description 世界树是一棵无比巨大的树,它伸出的枝干构成了整个世界.在这里,生存着各种各样的种族和生灵,他们共同信奉着绝对公正公平的女神艾莉森,在他们的信条里,公平是使世界树能够生生不息.持 ...

  8. [BZOJ 3209] 花神的数论题 【数位统计】

    题目链接: BZOJ - 3209 题目大意 设 f(x) 为 x 的二进制表示中 1 的个数.给定 n ,求 ∏ f(i)     (1 <= i <= n) . 题目分析 总体思路是枚 ...

  9. ios开发学习- 简易音乐播放器2 (基于iPhone4s屏幕尺寸)-- 歌词解析--plist文件应用--imageNamed图片加载耗内存

    声明:(部分图片来自网络,如果侵犯了您的权益请联系我,会尽快删除!) 又是音乐播放器,不过这次和上次不一样了,准确说这次更像播放器了,初学者不建议看这个,可以先看前面一个音乐播放器(1),当然 我没加 ...

  10. org.springframework.web.context.ContextLoaderListener

    ContextLoaderListener的作用就是启动Web容器时,自动装配ApplicationContext的配置信息.因为它实现了ServletContextListener这个接口,在web ...