The iframe page modifies the value of the hidden input component of the parent page and cannot trigger the change event. _html/css_WEB-ITnose

Implement an input component that arranges different input components based on the type of recharge card returned from the iframe page.

Click to select to pop up an iframe, click on the recharge card data row, and return to 1. Recharge card type. 2. Recharge card id (UUID used). 3. Recharge card number (string).

The problem encountered is that when the iframe selects a recharge card, the change event of the value of the input component on the parent page cannot be obtained.

parent page js

$("#id_card_type").change(function(){//事件无法捕获});

parent page 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 page 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);});

The solution is as follows:

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