javascript - AJAX/JQUERY 似乎无法删除数据

Question

嗯，我的主要问题是按钮。当我已经点击某个 tr 时，我似乎找不到按钮不显示的原因

这是显示从数据库返回的员工数据的代码

$.each(data, function(index, val) {
    $("#employee_list").append('<tr class="emp_delete" id="'+val.emp_id+'"><td>'+val.emp_id+'</td><td>'+val.last_name+'</td><td>'+val.first_name+
                                '</td><td>'+val.middle_in+'</td>'+
                                '<td><input type="button" value="Resigned Employee" class="deleteBtn" id="delete_"'+val.emp_id+'"></td></tr>');
                        });

这里是在单击 .emp_delete 时显示按钮的代码。然后.deleteBtn代码删除某些数据

$(".emp_delete").click(function(){
            var ID=$(this).attr('id');
            $("#delete_"+ID).show();        
        });

        $(".deleteBtn").click(function(){
            var ID=$(".emp_delete").attr('id');

            if (confirm("Are you sure you want to delete?")) {
            var dataString = 'emp_id='+ID;

            $.ajax({
                type: "POST",
                url: "<?php echo site_url('c_employee/delete_employee'); ?>",
                data: dataString,
                cache: false,
                success: function(html){
                    location.reload();
                }
            });
        }

更新

@Satpal 给出的代码有效，但 .deleteBtn 在经历了每个循环后仍然没有出现。

这是更新后的代码:

$('#employee_list').delegate( ".emp_delete", 'click', function() {
              var ID=$(this).attr('id');

              $("#delete_"+ID).show();
        });


        $(".deleteBtn").click(function(){

            var ID=$(".emp_delete").attr('id');

            if (confirm("Are you sure you want to delete?")) {
            var dataString = 'emp_id='+ID;

            $.ajax({
                type: "POST",
                url: "<?php echo site_url('c_employee/delete_employee'); ?>",
                data: dataString,
                cache: false,
                success: function(html){
                    location.reload();
                }
            });
        }
        else
            return false;

        });

Answer 1

当您动态添加 HTML 时。

您需要使用 Event Delegation .你必须使用 .on()使用委托(delegate)事件方法。

使用

$(document).on(event, selector, eventHandler);

在上面的示例中，document 应该替换为最近的静态容器。

在你的情况下

$('#employee_list').on('click', ".emp_delete", function() {
      var ID=$(this).attr('id');
      $("#delete_"+ID).show();
});

同样，您必须为 ".deleteBtn" 委托(delegate)事件

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

编辑

根据评论。

由于您使用的是 jQuery 1.5，因此请使用 .delegate()

 $(elements).delegate( selector, events, data, handler );

在你的情况下

$('#employee_list').delegate( ".emp_delete", 'click', function() {
      var ID=$(this).attr('id');
      $("#delete_"+ID).show();
});

编辑2

对删除按钮也使用类似的语法

$('#employee_list').delegate( ".deleteBtn", 'click', function() {
});