打开 Magnific Popup 时在 AJAX 调用中包含 $(this).data()

Question

我试图在打开 Magnific Popup 时发送带有 AJAX 请求的 data 对象。但是，$(this) 似乎没有在插件中正确翻译。

考虑这段代码：

<div class="my-div">
  <a href="/path/to/file.php" data-name="John" data-location="Boston">Click here</a>
</div>

$('.my-div a').magnificPopup({
  type: 'ajax',
  ajax: {
    settings: {
      data: $(this).data()
    }
  }
});

数据对象未正确返回。但是，如果我用这个替换数据线：

data: { name: "John", location: "Boston" }

然后我可以在$_GET 中引用这些对象。

---

编辑：为了进一步说明$(this) 在magnificPopup 中无法正常工作，我将数据行更改为：

data: { href: $(this).attr('href') }

仍然没有返回任何内容。

---

我所做的一切似乎都指向$(this) 在插件中没有得到尊重。如何从原始锚标记中获取 data 对象并将它们传递给 AJAX 请求？

Answer 1

$('.my-div a').magnificPopup({
      type: 'ajax',
      elementParse: function(item) {
           this.st.ajax.settings = item.el.data();
      }
});

Answer 2

我发现在请求中调用带有数据属性的 ajax 响应的最佳方法是在单击时调用 ajax 请求，而不是直接调用 magnificpopup。然后只需将响应插入标准内联 mfp。

$('a.popup').magnificPopup({
    type: 'ajax',
    ajax: {
        settings: {
            type: "POST",
            url: '/ajax.php',
            data: {
                action : 'ajax_action',
                postid : this.currItem.el.data('id')
                // this doesn't actually work because 'this.currItem'
                // is only accessible in a callback
            }
        }
    }
});

改为这样做：

$('a.popup').click(function(){
    $.ajax({
        type: "POST",
        url: '/ajax.php',
        data: {
            action : 'ajax_action',
            postid : $(this).data('id'),
            //$(this).data() works because it's a standard AJAX call
        },
        success: function(data){
            $.magnificPopup.open({
                type: 'inline',
                items: {
                    src: data
                }
            })
        }
    });
});

Answer 3

你可以试试这个

data: { name:$(this).data('name'), location:$(this).data('location')  }