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

Question

我有一个 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()，并且效果很好。感谢任何想法 - 我不知道为什么会这样，特别是考虑到它第二次起作用。

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

但是，使用 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

}

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

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

Magnific Popup page reverts to original format when try to send data

javascript

ajax

magnific-popup