jQuery生成的DOM元素事件處理程序挑戰

Question

我正在使用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> 

假定要做的是建立一個單選按鈕選擇器列表，單擊每個項目后，下面的內容應動態更改。

DOM構建正確：我在下面看到我的列表和內容，沒問題。 但是事件處理程序沒有觸發...

因此，這部分代碼不起作用：

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

但是，當我直接用HTML對列表元素進行硬編碼時，它確實起作用。 我覺得我缺少一些簡單的東西，而它的出現可能是由於我對jquery / js的淺淺理解。

謝謝

添加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是異步的，這意味着您的可疑代碼（以$（“ input [name = audience]：radio”：radio“開頭）.change是在getJSON完成之前執行的，因此在創建單選按鈕之前，因此不會為您的事件監聽器選擇。

嘗試在創建單選按鈕后立即將代碼移到getJSON回調中，它將像超級按鈕一樣工作！