javascript - 尝试发送数据时，放大的弹出页面恢复为原始格式

Question

我有一个华丽的弹出页面:

function dataLink(){
    $.magnificPopup.open({
        items: {
            src: 'datapage.html',
            type: 'ajax'
        },
        closeOnContentClick : false, 
        closeOnBgClick :true,
        showCloseBtn: false,
        enableEscapeKey : false,
        callbacks: {
            open: function(){
                $.magnificPopup.instance.wrap[0].addEventListener('focus', mpTable);
            },
            close: function(){
                $.magnificPopup.instance.wrap[0].removeEventListener('focus', mpTable);
            },
        }
    });
}

datapage.html 有两个表，我根据上下文隐藏或显示它们(页面加载时显示 data1table 和隐藏 data2table ):

<div class="white-popup">
  <table id="data1table" class="table1">    
  </table>
  <table id="data2table" class="table2">
  </table>    
</div> 

在 table1 中，有一个按钮可以隐藏 table1 并显示 table2。在table2中有一个按钮调用javascript函数来发送数据:

<input onclick="dataCheck()" type="button" value="Check Data" />

然后调用:

function dataCheck(){
    if(datacheck[0]==false || datacheck[1]==false){
        alert("Please enter data in all fields correctly.");
    } else{
        $.ajax({
            url: 'dataconfirm.php',
            type: "POST",
            async: false,
            data: {

            },
            dataType: 'json',
            success: function(data){
                alert("Thank you!");
                localdata=data;
                $.magnificPopup.close();
            }
        });
    };
}

我的挑战是，当您单击按钮调用 dataCheck() 时，它会恢复显示 table1 (最初由 Magnific Popup 加载)，而事实上并没有事件调用dataCheck()。如果用户再次单击该按钮以显示 table2，则他们可以再次单击 dataCheck() 按钮，并且工作正常。感谢您的任何想法 - 我不知道为什么会发生这种情况，特别是考虑到它第二次有效。

Answer 1

我终于明白了这个问题。在回调中，我根据 Magnific Popup 和其他人的建议创建了一个 EventListener，以允许操作 DOM 元素。这是因为 open 回调发生在创建元素之前，因此如果您尝试直接从此回调进行更改，您会收到一条错误，指出它们不存在。此信息可以在这里找到(我部分回答了我的问题，因为其他人似乎因为没有 afterload 回调而搞砸了，即 Magnific popup: Get current element in callback ):

https://github.com/dimsemenov/Magnific-Popup/pull/634

https://github.com/dimsemenov/Magnific-Popup/issues/632

但是，在 EventListener 中使用 focus 作为事件显然是有问题的，因为单击第二个按钮会导致页面重新聚焦，并且 EventListener 被触发(这是我看到奇怪行为的地方)。我尝试使用不同类型的事件，在本例中为onload:

$.magnificPopup.instance.wrap[0].addEventListener('onload', mpTable);

这确实有效……但随后又引起了其他问题。最好的解决方案是更新 mpTable 函数，使其仅触发一次:

function mpTable(e){

    e.target.removeEventListener(e.type, arguments.callee);

    //other stuff that the function does

}

我希望有一天这可以帮助别人!