jQuery生成的DOM元素事件处理程序挑战

Question

I am dynamically building a page using jquery/ajax/json:

 $(function() { $("#dv_tools").append("<ul></ul>"); $.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 $("<li><label><input type=radio name=audience value="+val["id"]+">"+val["name"]+"</label></li>").appendTo("#audience_list"); // selection content $("<li id=cat"+val["id"]+" class=vcat></li>").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'); }); 

 <ul id="audience_list"></ul> ... <div id="dv_tools"></div> 

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.

DOM is being built correctly: I see my list and content below, no problem. But the event handler is not firing...

So this portion of the code doesn't work:

  $("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'); 

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.

Thank you

Adding json:

{
"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"}
]

}

Answer 1

getJSON is asynchronous, which means that your suspicious code (starting with $("input[name=audience]:radio").change) is executed BEFORE the getJSON is completed, and therefore before your radio buttons were created, so they are not selected for your event listener.

Try to move that code INSIDE the getJSON callback, right after creating the radio buttons, and it'll work like a charm!