Question

我使用jquery / ajax / json动态构建页面：

＆＃13;

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

＆＃13;

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

＆＃13;

我们要做的是建立一个单选按钮选择器列表，点击每个项目后，下面的内容应该动态更改。

正在构建DOM：我在下面看到我的列表和内容，没问题。但是事件处理程序没有触发......

所以这部分代码不起作用：

＆＃13;

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

＆＃13;

但是，当我直接在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是异步的，这意味着你的可疑代码（以$（＆＃34;输入[name = audience]：radio＆＃34;）更改）在getJSON完成之前执行，因此在收音机之前执行按钮已创建，因此不会为您的事件监听器选择它们。

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

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

1 个答案: