实现一个依据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. GridBagLayout的帮助类

    自备详细注释 /* * To change this license header, choose License Headers in Project Properties. * To change ...

  2. 子元素的margin-top影响父元素原因和解决办法

    这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means tha ...

  3. [转] 使用CSS3 will-change提高页面滚动、动画等渲染性能 ---张鑫旭

    一.先来看一个例子 下面这个例子来自某外文,我这里简单转述下. 视差滚动现在不是挺流行的嘛,然后Chris Ruppel当其使用background-attachment: fixed实现背景图片不随 ...

  4. HTML5 拖拽 & fabric 插件

    ### 拖拽 //html <div ondrop="drop(event)" ondragover="allowDrop(event)">< ...

  5. YII 小部件 解决多选按钮和单选按钮不在同一水平上 'separator'=>'&nbsp;'

    主要是添加separator属性(这里)$hoddy,$sex在控制器里面定义的数组,然后render传过来的 <td>          <?php echo $form-> ...

  6. 转:简单介绍 P3P 技术

    原文来自于:http://blog.csdn.net/ghj1976/article/details/4889219 以 Internet Explorer 为例,默认情况下,IE的隐私策略如下图所设 ...

  7. matlab 全部的随机数函数

    matlab 全部的随机数函数 (一)Matlab内部函数 a. 基本随机数 Matlab中有两个最基本生成随机数的函数. 1.rand() 生成(0,1)区间上均匀分布的随机变量.基本语法: ran ...

  8. python operator模块

    官网:https://docs.python.org/3.4/library/operator.html http://pymotw.com/2/operator/

  9. Hibernate 配置详解(3)

    7) hibernate.max_fetch_depth: 该属性用于设置left out join单对象查询关系(one-to-one/many-to-one)中最大的关联深度.默认值为0,即默认情 ...

  10. ♫【HTML5 敏捷实践】第1章 使用语义化的方式实现

    <!DOCTYPE html> 向后兼容的HTML5<doctype>标签.HTML5规范规定<doctype>对大小写不敏感:然而,之前版本的HTML需要< ...