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上的click事件设置的函数只解析了当时存在的最初的两个按钮，但是由于你之后动态地添加了第三个按钮，因此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

尝试小于1.9的jquery版本：

$('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 =＆＃34;删除_＆＃39; + val.emp_id +＆＃39;＆＃34;而不是id =＆＃34;删除_＆＃34;＆＃39; + val.emp_id +＆＃39;＆＃34; （＆＃34;＆lt; - 错误）

AJAX / JQUERY似乎无法删除数据

5 个答案:

修改

编辑2