title: jquery-generated DOM elements event handler challenge
body: <p>I am dynamically building a page using jquery/ajax/json:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
      $("#dv_tools").append("&lt;ul&gt;&lt;/ul&gt;");
      $.getJSON( "assets/json/tools.json", function( data ) {
        var tools = [];
        $.each( data.tools, function( key, val ) {
            tools[val["id"]]=val;
        });
      
        $.each( data.audiences, function( key, val ) {
            // selector list
            $("&lt;li&gt;&lt;label&gt;&lt;input type=radio name=audience value="+val["id"]+"&gt;"+val["name"]+"&lt;/label&gt;&lt;/li&gt;").appendTo("#audience_list");
            
            // selection content
            $("&lt;li id=cat"+val["id"]+" class=vcat&gt;&lt;/li&gt;").html(val["id"] + "::" + val["name"]).appendTo("#dv_tools ul");
        });
      });
       
      $("input[name=audience]:radio").change(function () {
          $("#dv_tools ul").find('li').each(function() {
              if($(this).prop('id')=="cat"+$("input[name=audience]:checked").val()) $(this).show();
              else $(this).hide();
              alert("here!");
          });
      });
      $('input[name=audience]:radio[value=2]').attr('checked', 'checked');     
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="audience_list"&gt;&lt;/ul&gt;
  ...
  &lt;div id="dv_tools"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What it is suppose to do is to build a radio button selector list, after clicking on each item the content below should change dynamically.</p>
  
  <p>DOM is being built correctly: I see my list and content below, no problem. But the event handler is not firing...</p>
  
  <p>So this portion of the code doesn't work:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    $("input[name=audience]:radio").change(function () {
          $("#dv_tools ul").find('li').each(function() {
              if($(this).prop('id')=="cat"+$("input[name=audience]:checked").val()) $(this).show();
              else $(this).hide();
              alert("here!"); //not working :(
          });
      });
      $('input[name=audience]:radio[value=2]').attr('checked', 'checked'); </code></pre>
  </div>
  </div>
  </p>
  
  <p>It does work, however, when I have my  list elements hardcoded in HTML directly. I feel like I am missing something simple and it prob comes from my shallow understanding of jquery/js.</p>
  
  <p>Thank you </p>
  
  <p>Adding json:</p>
  
  <pre><code>{
  "audiences": [
      {"id":"1","name":"Plan Sponsor (existing)","tools":"1,2,3,9"},
      {"id":"2","name":"Plan Sponsor (prospect)","tools":"4,6,2,3"},
      {"id":"3","name":"Professional Employer Organization (PEO) (existing)","tools":"1,2,3,7"},
      {"id":"4","name":"Professional Employer Organization (PEO) (prospect)","tools":"1,2,3,5"}        
  ],
  "tools": [
      {"id":"1","name":"tool1","desc":"some description"},
      {"id":"2","name":"tool2","desc":"some description"},
      {"id":"3","name":"tool3","desc":"some description"},
      {"id":"4","name":"tool4","desc":"some description"},
      {"id":"5","name":"tool5","desc":"some description"}
  ]
  </code></pre>
  
  <p>}</p>