jQuery选择器不能动态添加表格的行

Question

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

的问题是，它似乎也许这动态添加的行不会被添加到DOM和我的jQuery选择.ups不起作用

$(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 

}); 

Answer 1

您是否尝试过用一个函数包装click事件和每次添加相关按钮时调用它。

$（文件）。就绪（函数（）{

$("#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 
    }); 
} 

Answer 2

使用事件代表团：

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