Recieving two values from data attribute one being undefined

Question

I am trying to link to divs together by linking the data-attribute name with the id but seem to receive an error

<div class="pod-container grid_3" data-name="#george">
  <div class="pod">
    <img src="img/example1.png" alt="">
  </div>
</div>

<div id="george">Hello World</div>

I'm referencing jQuery 1.8.3 and using the following code to identify the data attribute on the div i click

<script>
  $('.pod-container').click(function(){
    var identifyId = $(this).data('name');
    console.log(identifyId);
    //$(identifyId).show();
  });
</script>

but when it is logged in the console I get.

#george                                    testdoc.html:123 
undefined                                  testdoc.html:123 

Answer 1

Just grab the elements that have the data-name. What you're currently doing is targeting just .pods which may or may not have data-name. With the below code, you're just being specific.

$('.pod[data-name]').click(function(){
   var identifyId = $(this).data('name');
   console.log(identifyId);
   //$(identifyId).show();
});

Answer 2

You've got two elements with class "pod". One of them has a data-name attribute, and one doesn't. Each click will trigger the event handler on both elements.

Answer 3

You have 2 elements with the pod class and are getting 2 events fire. The inner div does not have a data-name attribute.