Javascript - 自定义列表项 - 回调只是调用最后一项

Question

function createSimpleListItem(_holder, _text, _icon, _icon_style_class, _callback) {
    var tid = prefUUID();

    var thm = ' \
                <div class="home-list-item" > \
                    <div class="score"> \
                        <span class="{ic} {st}" /> \
                    </div> \
                    <span id="{tid}" class="text">{txt}</span> \
                </div > \
              '
        .replace("{tid}", tid)
        .replace("{ic}", _icon)
        .replace("{st}", _icon_style_class)
        .replace("{txt}", _text);

    console.log(thm);

    _holder.html(_holder.html() + thm);

    $("#" + tid).click(function () { _callback() });
}

我制作了5个列表项并添加到我的列表中（div）;传递的回调只是为最后一个列表项工作;为什么！？

我的“tid”是这样的：

ebd8ae9c-ef57-4c40-a931-16d352b674da-2222-9999999981374
266e0d1c-eb10-490e-922a-85b468d84b8d-2224-599999957718
e758f295-e545-468a-9afd-a9bbcf4cd3d0-2226-199999975506

修改

我使用以下代码填写我的列表：

for (var i = 0; i < jsonData.length; i++) {
        createSimpleListItem($("#list"), jsonData[i].title, "commenting", "ic-lock",
            function () {//action
                alert();
            }
        );
    }

Answer 1

代码似乎没问题。尝试在添加单击侦听器的行添加超时

setTimeout({$("#" + tid).click(() => _callback())}, 1000);

或尝试使用js

添加事件

document.getElementById(tid).addEventListener('click', _callback, false);

Answer 2

问题在于将jQuery与＆＃34;常规＆＃34;混合使用HTML操作。

使用jQuery本身构建元素（在验证时，_holder.append(thm)而不是通过_holder.html(_holder.html() + thm);操纵内容使其工作）。