Question

我有一个生成面板组的功能，在此面板组内有一个列表。两者都是基于数据库动态生成的。生成过程按预期工作，我显示的结果也是根据我的想法。但是，我无法在单个列表项上捕获click事件。

function generateOutputList (data){

$InfoList = $j("#output");
var output = "";

$j.each(data, function(i, item){
    output += "<div class='panel-group'>"+
        "<div class='panel panel-default'>"+
            "<div class='panel-heading'><a data-toggle='collapse' href='#"+item['info_id']+"'>"+item['info_address']+"" +
        "</a><span class='badge customBadge'>"+item['user_count'][0]['user_count']+"</span></div>"+
                "<div class='panel-collapse collapse' id='"+item['info_id']+"'>"+
                    "<ul class='list-group' id='items"+item['info_id']+"'></ul>"+
                    "<div class='panel-footer'><button class='btn btn-group-sm btn-default'>Alle benachrichtigen</button></div>"+
                "</div>"+
            "</div>"+
        "</div>";
});
$InfoList.html(output);

这是捕获面板上的Click并根据Ajax请求生成列表项的函数：

 $j("#output").on('show.bs.collapse', function (event){

    console.log(event.target.id);
    var currentInfoId = event.target.id;
    console.log($j(this).attr('id'));

    $j("#items"+currentInfoId).html("");

    requests.getMemberNotRead(currentInfoId, function (userList){
       console.log(userList);

        //Here the <li> inside the panel is generated
        $j.each(userList, function(i, item){
            $j("#items"+currentInfoId).append("<a href='#' class='list-group-item'>" +
                "<span class='user_name'>"+item['user_name_last']+", "+item['user_name_first']+"</span>" +
                " <span class='user_mail'>"+item['user_mail_address']+"</span>" +
                " <span class='user_notify'><button id='notifyUser' class='btn btn-default notifyUser'>Nutzer Benachrichtigen</button></span></a>");
        });
    });
});

我甚至无法点击列表项内的Button（id：notifyUser）。有人能告诉我我做错了什么，我如何设置选择器使这段代码有效？

如果我只是在没有基于数据库的信息的情况下使用HTML标记，那么一切正常。希望有人可以帮助我。

编辑：为了测试，我将li-tag更改为a-tag

Answer 1

您应该使用.delegate()方法将事件附加到动态添加的元素。例如 -

$j("#output").delegate("#notifyUser", "click", function( event ) {} );

或遵循.on()方法的版本 -

$j("#output").on("click", "#notifyUser", function( event ) {} );

在Panel-group和list-group中选择<li>

1 个答案: