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()。

使用

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

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

你的情况

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

同样你必须为".deleteBtn"委托事件

委托事件的优点是它们可以处理来自后代元素的事件，这些事件会在以后添加到文档中。

编辑

根据评论。

由于您使用的是 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() {
});

Answer 2

你的意思是按钮不触发？

如果是这样，那是因为你在将元素插入DOM之前定义了函数，你需要绑定它。

所以而不是：

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

放：

$("#employee_list").on("click",".deleteBtn",function(){

Answer 3

一旦文档完全加载，每次你动态地向 DOM 添加一个新对象（比如添加一个带有按钮的新表格行）时，你都需要将生成的元素绑定到一个事件或动作，你不能说“当有人点击任何按钮时做某事”你会说“当有人点击这个按钮时做某事”意味着您必须首先创建对象才能“附加”一些操作。

假设你有这些：

<button class="action-button" id="1">Button 1</button>
<button class="action-button" id="2">Button 2</button> 

然后这个javascript：

$(document).ready(function(){
    $(".action-button").click(function(){
        alert('My id is ' + $(this).attr('id'));
    });
});

然后你决定在你的 js/html 上添加一个按钮：

<button class="action-button" id="3">Button 3</button>

惊喜！如果您单击按钮 3，您将不会收到任何警报...？为什么，因为您为 document.ready 上的单击事件设置的函数仅解析了当时存在的最初两个按钮，但是由于您稍后动态添加了第三个按钮，因此 document.ready 代码不知道它。

正如 Emil 指出的那样，每次创建新元素时，您都希望绑定它，在我们的示例中，为按钮 3：

$('#3').bind('click', function(){
    alert('My id is ' + $(this).attr('id'));
});

或者通过类，这是不够的，因为它会重新绑定现有元素并且您会失去性能：

$('.action-button').bind('click', function(){
    alert('My id is ' + $(this).attr('id'));
});

因此，请确保如果添加执行操作或调用函数的元素，则在添加它们时绑定它们，理想情况下，有一个单独的函数来执行按钮需要执行的任何操作，然后在绑定新元素时绑定它到那个函数，而不是直接回调。

Answer 4

试试jquery 1.9以下的版本：

$('selector').live('click', function(){

});

Answer 5

你的 id 删除有问题

<div id="di"></div>
<a href="#" id="algo">Algo</a>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$('#algo').click(function(){
    var a = 1;
    //THIS IS IMPORTANT , SEE ID = "delete_" <- has a problem
    $('#di').html('<td><input type="button" value="Resigned Employee" class="deleteBtn" id="delete_'+a+'"></td></tr>');

});
</script>

是 id="delete_'+val.emp_id+'" 而不是 id="delete_"'+val.emp_id+'" ("