• 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'); //有效
    });
    


  • 相关阅读:
    设计模式--17、建造者模式
    设计模式--16、原型模式
    面向对象的几大设计原则
    设计模式--15、模板方法模式
    设计模式--14、中介者模式
    设计模式--13、享元模式
    设计模式--12、外观模式
    设计模式--11、命令模式
    消息中间件ActiveMQ、RabbitMQ、RocketMQ、ZeroMQ、Kafka如何选型?
    Kafka,Mq,Redis作为消息队列有何差异?
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/5254158.html
Copyright © 2020-2023  润新知