javascript - 调用内联 ajax 时，magnificpopup 仅在第二次单击时起作用

Question

我正在尝试调用本地网页以在 magnificpopup 叠加层中加载，但它仅在第二次点击时这样做。

在我的网络选项卡中，我可以看到它正在请求该页面，但它不会触发叠加层并加载到该 html 中，直到第二次点击。

我是 JS 的大三学生，所以我不太确定我需要做什么，所以任何指点都将不胜感激!

Component.prototype = {

    init: function () {
        var that = this;

        this.$element.on('click tap',function(e){
            e.preventDefault();
            that._galleryId = that.$element.attr('href'); //get the url from the link we've just clicked
            that._initialiseGallery(that);

        });

    },
    _onGalleryOpen: function(that){
        console.log('test5');
        if(that.options.fullScreenType === 'image'){
            $(window).trigger('resize');
        }
    },

    _initialiseGallery: function(that) {

        that.$element.magnificPopup({
          items: {
            src: that._galleryId
          },
          type: 'ajax',

            callbacks: {
                open: function() {
                    that._onGalleryOpen(that);
                },
                close: function() {
                  // Will fire when popup is closed
                },
              parseAjax: function(mfpResponse) {
                // mfpResponse.data is a "data" object from ajax "success" callback
                // for simple HTML file, it will be just String
                // You may modify it to change contents of the popup
                // For example, to show just #some-element:
                mfpResponse.data = $(mfpResponse.data).find('.Gallery');

              },
              ajaxContentAdded: function() {
                // Ajax content is loaded and appended to DOM
              }
            }
        });
    }
}

Answer 1

如此变化:

that.$element.magnificPopup({

到:

$.magnificPopup.open({...});

成功了!

我在这里找到了解决方案:Magnific-popup fails to open from button inside Google Maps infoBox