jquery选择器没有'不能处理表中动态添加的行

jquery selector doesn't work with dynamically added row of a table

本文关键字：动态 添加 处理 不能 选择器 jquery      更新时间：2023-09-26

在更改下拉列表时，我会动态地向表中添加一行。在我添加的行的最后一个单元格中，我有一个类为".ups"的按钮。

问题是，这个动态添加的行似乎没有添加到DOm和我的jquery选择器中

  $(document).ready(function () {
    $("#drdCriterias").change(function () {

        var table = document.getElementById("tableCriterias");
            var row = table.insertRow(-1);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            cell1.innerHTML = $('#drdCriterias').val();
            cell2.innerHTML = $('#drdCriterias :selected').text();
            cell3.innerHTML = '<button type="button" class="ups"><span class="glyphicon glyphicon-circle-arrow-up"></span></button>';
    });
    $("tr .ups").click(function () {
        alert("Hi"); //nothing happens
});

使用事件委派：

$("body").on('click','tr .ups',function () {
    alert("Hi"); 
});

您是否尝试过用函数包装点击事件，并在每次添加相关按钮时调用它。

$（document）.ready（function（）｛

$("#drdCriterias").change(function () {

    var table = document.getElementById("tableCriterias");
        var row = table.insertRow(-1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        cell1.innerHTML = $('#drdCriterias').val();
        cell2.innerHTML = $('#drdCriterias :selected').text();
        cell3.innerHTML = '<button type="button" class="ups"><span class="glyphicon glyphicon-circle-arrow-up"></span></button>';
    upsClick();
});
function upsClick() {
   $("tr .ups").click(function () {
       alert("Hi"); //nothing happens
   });
}
相关文章：