javascript - 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 中硬编码列表元素时，它确实有效。我觉得我错过了一些简单的东西，这可能来 self 对 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").change 开头)是在 getJSON 完成之前执行的，因此是在创建单选按钮之前执行的，因此它们没有被选择作为您的事件监听器。

尝试在创建单选按钮后立即将该代码移动到 getJSON 回调中，它会像魅力一样工作!