Jquery - Trying to access information from external JSON file but 'undefined' is returned

Question

So, I have a jquery file that fetches image meta from a local JSON file. This file retrieves certain information regarding the title, author, and the full-res image url. The issue lies where I try to get the url after having someone select an image (and displays the info/full-res view).

Below is my main.js file:

$(document).ready(function(){
    $('ul.tabs').tabs();
    $('.modal-trigger').leanModal();
    $('.dropdown-button').dropdown({
      inDuration: 225,
      outDuration: 225,
      constrain_width: false,
      hover: false,
      gutter: 0,
      belowOrigin: false,
      alignment: 'right'
    });
    $.getJSON("res/assets/wallpapers/meta.json", function(wallpapersmeta) {
    $.each(wallpapersmeta.wallpapers, function(i, item) {
        $('#wallpapers').append('<a href="#' + this.id + '" class="wpbtn waves-effect waves-dark wppreview-trigger"><div class="wallpaper" style="background-image: url(' + this.thumb + ');"><div class="wp-info"><div class="wp-title">' + this.title + ' </div></div></div></a><div id="' + this.id +'" class="modal bottom-sheet wppreviewcard"><div class="wppreviewimg" style="background-image: url(' + this.thumb + ');"></div><a class="btn-floating btn-large waves-effect waves-light orange previewfab modal-close" id="apply' + this.tagid + '"><i class="material-icons">format_paint</i></a><div class="modal-content"><h4>' + this.title + '</h4><p>Creator: ' + this.author + '<br>Last Modified: ' + this.datelm + '</p></div></div>');
        $( "#" + this.id ).click(function() {
          console.log('hello' + this.url);
        });
    });
    $.each(wallpapersmeta.wallpapers, function(wallpapersmeta) {

    });
    $('.wppreview-trigger').leanModal();
});
});

When I get the information from the JSON file - everything in the .append works perfectly fine. But when I try to fire the .click function - it will only let me display the file's ID, and everything else returns as undefined.

Just to clarify:

$( "#" + this.id ).click(function() {
  console.log('hello' + this.id);
});

The above works.

$( "#" + this.id ).click(function() {
  console.log('hello' + this.url);
});

The above doesn't work.

So, how do I fix this issue where my data isn't being carried over with the .click function?

This is all going to be in a chrome packaged app, so I do know there are some restrictions on JS as to how it behaves.

Just to add - here are 3 entries for the JSON file:

"0001": {
    "id" : "0001",
    "tagid" : "0001",
    "title": "Google Dots",
    "author": "Christopher Bravata",
    "datelm" : "Februrary 26, 2016",
    "thumb" : "res/assets/wallpapers/0001/0001tb.png",
    "url" : "res/assets/wallpapers/0001/0001.png"
  },
  "0002": {
    "id" : "0002",
    "tagid" : "0002",
    "title": "Zurich Airport",
    "author": "Unsplash / Erez Attias",
    "datelm" : "Janurary 20, 2016",
    "thumb" : "res/assets/wallpapers/0002/0002tb.jpg",
    "url" : "res/assets/wallpapers/0002/0002.jpeg"
  },
  "0003": {
    "id" : "0003",
    "tagid" : "0003",
    "title": "Winter Home",
    "author": "Unsplash / Paul Itkin",
    "datelm" : "November 18, 2015",
    "thumb" : "res/assets/wallpapers/0003/0003tb.jpg",
    "url" : "res/assets/wallpapers/0003/0003.jpeg"
  },