title: Accessing elements inside HTML using jQuery
body: <p>I'm trying to access elements inside an accordion menu. I populate my accordion menu with JSON data which is loaded using jQuery. I can see that the full menu is being created when the page loads. The problem is that I can't access the second level in the menu.</p>
  
  <p>JSON-file ("cwdata.json"):</p>
  
  <pre><code>{
      "Country": [{
              "CountryName": "COUNTRY NAME GOES HERE",
              "Region": [{
                      "RegionName": "REGION NAME GOES HERE",
                      "SubRegion": [{
                              "SubRegionName": "SUBREGION NAME GOES HERE"
                          }]
                  }]
          }]
  }
  </code></pre>
  
  <p>jQuery used to populate the accordion menu from a JSON file:</p>
  
  <pre><code>$.getJSON('../JSON/cwdata.json', function (cwData) {
          $.each(cwData.Country, function (i, country) { // loop through all the countries
              var countries = '&lt;li class="country_name"&gt;&lt;a href="#"&gt;' + country.CountryName + '&lt;/a&gt;&lt;/li&gt;'; // the name of the country
              var country_region = '&lt;ul class="country_region"&gt;'; // create a list of all the regions in the country
              var region_subregion = "";
  
              $.each(country.Region, function (i, region) { // loop through all the regions
                  country_region += '&lt;li class="region_name"&gt;&lt;a href="#"&gt;' + region.RegionName + '&lt;/a&gt;&lt;/li&gt;'; // the name of the region
                  region_subregion = '&lt;ul class="region_subregion"&gt;'; // create a list of all the subregions in the region
  
                  $.each(region.SubRegion, function (i, subregion) { // loop through all the regions
                      region_subregion += '&lt;li class="subregion_name"&gt;&lt;a href="#"&gt;' + subregion.SubRegionName + '&lt;/a&gt;&lt;/li&gt;'; // the name of the subregion
                  });
                  region_subregion += '&lt;/u&gt;'; //close the list tags
              });
              country_region += '&lt;/ul&gt;'; //close the list tags
              $(countries).appendTo('#Country').append(country_region); // append the region to the country and append the country to the accorion menu
              $(region_subregion).appendTo("li.region_name"); // append the subregion to the region
          });
      }); // getJSON
  </code></pre>
  
  <p>The first item in the menu ("Home") works when I click on it. But any item under "Home" has no reaction or feedback when I click on it.</p>
  
  <p>This is the HTML menu after the page has been loaded:</p>
  
  <p><img src="https://i.stack.imgur.com/QyRta.png" alt="enter image description here"></p>
  
  <p>I can use this code to check what the element is when I click on it:</p>
  
  <pre><code>$("a").click(function (event) {
      alert("Value: " + event.target);
  });
  </code></pre>
  
  <p>If I click on "Home", it returns: <code>"Value: HTMLSpanElement"</code>. But when I click on "COUNTRY NAME GOES HERE", nothing happens. I couldn't get this to work on a Fiddle either but here is what I can supply:</p>
  
  <p><a href="http://fiddle.jshell.net/3d6Nz/2/" rel="nofollow noreferrer">http://fiddle.jshell.net/3d6Nz/2/</a></p>