iframe ページは親ページの非表示の入力コンポーネントの値を変更しますが、変更イベントをトリガーできません。 _html/css_WEB-ITnose

iframe ページに基づいてさまざまなリチャージ カード タイプを返す入力コンポーネントを実装します。

クリックして選択すると、リチャージ カード データ行をクリックして 1. リチャージ カード タイプに戻ります。 2. カード ID をリチャージします (UUID を使用)。 3. カード番号 (文字列) をチャージします。

発生した問題は、iframe がリチャージ カードを選択するときに、親ページの入力コンポーネントの値の変更イベントを取得できないことです。

親ページ js

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

親ページ フォーム

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