jquery - click() 不适用于 ajax jquery 附加 TD

Question

嗨，我有一个 ajax 功能，可以从服务器端获取数据并将附加 td 添加到表行

 var str =$(".note-list");
$.ajax({    
            type: "GET",
            url: "abc.htm",

            success: function(msg){    
                 var s="<tr class='fc-staff'>";             

alert("success"+str);

            $.each( msg, function(i,value ) {

                     s=s+"<td class='fc-widget-content fc-first'>"+value+"<i      
        class='icon-remove'></i></td> ";


                });
            s=s+"</tr>";
            str.html(s);
            $("#popup").show();
        },
 error : function(e) {
        alert('Error: ' + e);
    }
    });

 });

对于从上面的 jquery 附加的此 td，单击功能不起作用。笔记。它适用于其他表中的其他 td

我的jquery函数

$("td").click(function() {
        alert("tdclicked"); // Its not working
        alert($(this).text());
    });

FUI，

即使在查看页面源代码中，附加源也没有显示，但在 UI 中它即将出现

我的页面源是

<table class="fc-border-separate note-list" style="width: 100%"
                                    cellspacing="0">
                // Not showing appended td                  
</table>

帮助我让 jquery 函数适用于此附加的 td。

提前致谢

Answer 1

当您在加载 DOM 后附加 td 元素时，您需要使用委托(delegate)事件处理程序。试试这个:

$(".note-list").on('click', 'td', function() {
    alert("tdclicked"); // Its not working
    alert($(this).text());
});