点击不起作用 - 可能是因为socket.on（）？

Question

在套接字＆＃39;通知＆＃39;我使用从mysql中找到的数据更新每个<td>。一切正常，除非我单击<td>数据并显示弹出窗口，然后我尝试单击编辑或删除按钮，没有任何反应。我在下面附上了一个示例图片，向您展示它的外观......

$(document).ready(function() {

var socket = io.connect('http://localhost:8080');

    socket.on('notification', function (data) {

        var schedulesList = JSON.stringify(data.schedules);

            $.each(data.schedules, function(index, schedule) {
                var dt = new Date(schedule.start_time);
                var y = dt.getFullYear();
                var m = dt.getMonth() + 1;
                var d = dt.getDate();
                var ymd = y + '-' + m + '-' + d;
                var ymd_fmt = $.datepicker.formatDate('DD MM dd, yy', new Date(schedule.start_time));

                var assignedtechs2 = assignedtechs.split(',');
                $.each(assignedtechs2,function(i){
                    var techuid = ymd + '-' + assignedtechs2[i];

                    var html = "";
                        html += "<div class='blockout'>"+schedule.duration+"</div>";
                        html += "<div class='dvpopup' id='dv-"+techuid+"' schedule_id='"+schedule.schedule_id+"'><img src='/images/x3blk.png' class='bClose2' title='close' border='0'>";
                        html += "<table width='100%' border='0' align='center'>";
                        html += "   <tr><td colspan='2'>";
                        html += "       <a class='newbutton edit_button' dataelement='"+techuid+"' href='#' style='color: #000000; font-size: 10px;' title='Edit'>EDIT</a>";
                        html += "       <a class='newbutton del_button' dataelement='"+techuid+"' href='#' style='color: #000000; font-size: 10px;' title='Delete'>DELETE</a>";
                        html += "   </td></tr>";
                        html += "   <tr><td>&nbsp;</td></tr>";
                        html += "   <tr><td class='techinfo_r'>Date: </td><td class='techinfo_l'></td></tr>";
                        html += "   <tr><td class='techinfo_r'>Time: </td><td class='techinfo_l'></td></tr>";
                        html += "   <tr><td class='techinfo_r'>Duration: </td><td class='techinfo_l'></td></tr>";
                        html += "   <tr><td class='techinfo_r'>WO#: </td><td class='techinfo_l'></td></tr>";
                        html += "   <tr><td class='techinfo_r' valign='top'>Techs: </td><td class='techinfo_l'></td></tr>";
                        html += "   <tr><td class='techinfo_r'>Client: </td><td class='techinfo_l'></td></tr>";
                        html += "   <tr><td class='techinfo_r'>Project: </td><td class='techinfo_l'></td></tr>";
                        html += "   <tr><td class='techinfo_r'>Coordinator: </td><td class='techinfo_l'></td></tr>";
                        html += "   <tr><td class='techinfo_r'>Notes: </td><td class='techinfo_l'></td></tr>";
                        html += "   </table>";
                        html += "</div>";

                    $('#'+techuid).attr('thin','0');
                    $('#'+techuid).html(html);
                });
            });

        $('#time').html('Last Update: ' + data.time);
    });


    $('.edit_button').click(function(event) {

        alert('Edit button worked!');

        event.stopPropagation();
        event.preventDefault();

    });

    $('.del_button').click(function(event) {

            alert('Delete button worked!');

            event.stopPropagation();
            event.preventDefault();

        });
});

示例图片：

Answer 1

使用事件委派，因为HTML是动态创建的：

 $(document).on('click','.edit_button',function(event) {

        alert('Edit button worked!');

        event.stopPropagation();
        event.preventDefault();

    });

    $(document).on('click','.del_button',function(event) {

            alert('Delete button worked!');

            event.stopPropagation();
            event.preventDefault();

        });