javascript - 尝试发送数据时，Magnific Popup页面恢复为原始格式

我有一个壮观的弹出页面：

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()，它会正常工作。感谢您的任何想法-我不知为什么会发生这种情况，尤其是考虑到它第二次起作用了。

最佳答案

我终于弄清楚了这个问题。在回调中，我根据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

但是，在focus中使用EventListener作为事件显然是有问题的，因为单击第二个按钮会使页面重新聚焦，并触发EventListener（这是我看到的奇怪行为的地方） 。我尝试使用其他类型的event，在这种情况下为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

}

我希望有一天能对某人有所帮助！