iframe 子页面调用父页面控件事件导致重复加载

父页面控件

  <select id="aaaa">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
             </select>

子页面调父页面事件，因为子页面有个select和父页面级联，还有数据表加载，所以在子页面需要调父页面change事件

$("#aaaa", parent.document).on("change",function (event){
        var aa=$(this).find("option:selected").val();
        alert(aa);
});

现在出现问题：重复点击主页面链接刷新子页面，主页面"#aaaa"的"change"会重复执行，点击链接刷新几次子页面重复执行几次事件，求解决办法

$("#aaaa", parent.document).on("change",function (){
        var aa=$(this).find("option:selected").val();
        alert(aa);
});

$("#aaaa").on("change",function (event){
var aa=$(this).find("option:selected").val();
alert(aa);
});去掉parent.document

问题在于你这段代码不应该放到子页面中，而应该放到父页面：

放到父页面

 $("#aaaa").on("change",function (event){
        var aa=$(this).find("option:selected").val();
        alert(aa);
});

当子页面需要出发父页面的select的change事件时，通过$(top.window).find("#xxx").trigger("change");触发

点进来发现我之前的回复没有了，这是啥情况，你给我的评论我也看不到了。

因为用on()可以对同一事件同时绑定多个事件函数。
你每次刷新子页面时都会重新执行on()对父页面的select元素增加绑定一次事件函数。这样刷新几次子页面就重复绑定几个事件函数。
可以重复绑定事件之前用off()移除之前的绑定。

$("#aaaa", parent.document).off("change").on("change",function (event){
        var aa=$(this).find("option:selected").val();
        alert(aa);
});

迂回解决了，在主界面刷新子界面，不再用子界面调用"change"事件，若谁要好的子页面不重复调用事件的方法欢迎发给我

 $('#aaaa').on("change",function (event){
    aa=$(this).find("option:selected").val();
    $('#iframe').attr('src', $('#iframe').attr('src'));
});

那在离开页面前移除事件

$("#aaaa", parent.document).on("change",function (event){
        var aa=$(this).find("option:selected").val();
        alert(aa);
});
$(window).on("beforeunload", function(event){
    $("#aaaa", parent.document).off("change");
});

也可以直接在父页面绑定事件，然后事件中调用子页面的函数。

$("#aaaa").on("change",function (event){
        var aa=$(this).find("option:selected").val();
        var cf = document.getElementById("子页面iframe的id").contentWindow;
        if (cf && cf.myfunction) {
            cf.myfunction(aa,this);
        }
});

只要在每个子页面中都定义一个myfunction函数就可以了。