Including $(this).data() in AJAX call when opening Magnific Popup

Question

I am trying to send the data object with an AJAX request when opening up a Magnific Popup. However, it seems like $(this) is not being translated correctly within the plugin.

Consider this code:

<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()
    }
  }
});

The data object is not properly returned. However, if I replace the data line with this:

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

Then I'm able to reference those objects in the $_GET.

---

EDIT: To further the fact that $(this) is not functioning properly within magnificPopup, I changed the data line to:

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

Which still returns nothing.

---

Everything I've done seems to point at $(this) not being respected within the plugin. How can I get the data objects from the original anchor tag and pass them on to the AJAX request?

Answer 1

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