php - jQuery 不适用于辅助页面(DataTables)

Question

我有一个简单的表格(使用 DataTables 创建)，最后一列填充了 2 个按钮。这些按钮连接到 jquery。接下来的问题是:如果我在表格的第一页上并且按下其中一个按钮，则一切正常。如果我在第二/第三/etc 页上按相同的按钮，功能将不再起作用...你能解释一下为什么吗？这是我第一次遇到这个问题。谢谢!

按钮使用类调用 jQuery，而不是 Id(只是一个小注释)

编辑:

$('.generare_diploma').click(function(){            
                    var user_id = $(this).attr('id').split('-');
                    if(user_id[1] != ''){
                        $.ajax ({
                            url: "./genereaza.php",
                            type: "POST",
                            data: {user_id:user_id[1],todo:'generare_diploma_admin'},
                            cache: false,
                            success: function(){
                                $('#diploma-'+user_id[1]).attr('onclick',location.href = './genereaza.php?user_id='+user_id[1]+'&todo=download_diploma_admin');
                            },
                            error: function(xhr, status, error) {
                                var err = eval("(" + xhr.responseText + ")");
                                alert(err.Message);
                            }
                        });
                    }
                });

这就是我的 anchor 的样子:

<a id="diploma-'.$user['user_id'].'" class="btn btn-sm btn-success generare_diploma" data-toggle="tooltip" title="Genereaza diploma !"><i class="fa fa-calendar-check-o"></i></a>

Answer 1

$(document).on('click', '.generare_diploma',function(){            
                var user_id = $(this).attr('id').split('-');
                if(user_id[1] != ''){
                    $.ajax ({
                        url: "./genereaza.php",
                        type: "POST",
                        data: {user_id:user_id[1],todo:'generare_diploma_admin'},
                        cache: false,
                        success: function(){
                            $('#diploma-'+user_id[1]).attr('onclick',location.href = './genereaza.php?user_id='+user_id[1]+'&todo=download_diploma_admin');
                        },
                        error: function(xhr, status, error) {
                            var err = eval("(" + xhr.responseText + ")");
                            alert(err.Message);
                        }
                    });
                }
            });

编辑:jQuery 仅在运行时识别页面中的元素，因此 jQuery 无法识别添加到 DOM 的新元素。要解决这个问题，请使用 event delegation ，从新添加的项目到 DOM 中某个点的冒泡事件，该点在 jQuery 在页面加载时运行时就在那里。许多人使用 document 作为捕获冒泡事件的地方，但没有必要一直沿着 DOM 树向上走。理想情况下you should delegate to the nearest parent existing at the time of page load.