title: Jquery - Trying to access information from external JSON file but 'undefined' is returned
body: <p>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).</p>
  
  <p>Below is my main.js file:</p>
  
  <pre><code>$(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('&lt;a href="#' + this.id + '" class="wpbtn waves-effect waves-dark wppreview-trigger"&gt;&lt;div class="wallpaper" style="background-image: url(' + this.thumb + ');"&gt;&lt;div class="wp-info"&gt;&lt;div class="wp-title"&gt;' + this.title + ' &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;&lt;div id="' + this.id +'" class="modal bottom-sheet wppreviewcard"&gt;&lt;div class="wppreviewimg" style="background-image: url(' + this.thumb + ');"&gt;&lt;/div&gt;&lt;a class="btn-floating btn-large waves-effect waves-light orange previewfab modal-close" id="apply' + this.tagid + '"&gt;&lt;i class="material-icons"&gt;format_paint&lt;/i&gt;&lt;/a&gt;&lt;div class="modal-content"&gt;&lt;h4&gt;' + this.title + '&lt;/h4&gt;&lt;p&gt;Creator: ' + this.author + '&lt;br&gt;Last Modified: ' + this.datelm + '&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;');
          $( "#" + this.id ).click(function() {
            console.log('hello' + this.url);
          });
      });
      $.each(wallpapersmeta.wallpapers, function(wallpapersmeta) {
  
      });
      $('.wppreview-trigger').leanModal();
  });
  });
  </code></pre>
  
  <p>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. </p>
  
  <p>Just to clarify:</p>
  
  <pre><code>$( "#" + this.id ).click(function() {
    console.log('hello' + this.id);
  });
  </code></pre>
  
  <p>The above works.</p>
  
  <pre><code>$( "#" + this.id ).click(function() {
    console.log('hello' + this.url);
  });
  </code></pre>
  
  <p>The above doesn't work.</p>
  
  <p>So, how do I fix this issue where my data isn't being carried over with the .click function? </p>
  
  <p>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.</p>
  
  <p>Just to add - here are 3 entries for the JSON file:</p>
  
  <pre><code>"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"
    },
  </code></pre>