Javascript jquery选择器没有'；无法处理动态添加的表行

在更改下拉列表时，我会动态地向表中添加一行。 在我要添加的行的最后一个单元格中，我有一个带有class“.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

});

$（文档）.ready（函数（）{
$（“#drdCriterias”）。更改（函数（）{
var table=document.getElementById（“tableCriterias”）；
var行=table.insertRow（-1）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
cell1.innerHTML=$（'#drdCriterias'）.val（）；
cell2.innerHTML=$（'#drdCriterias:selected'）.text（）；
cell3.innerHTML=''；
});
$（“tr.ups”）。单击（函数（）{
警惕（“嗨”）；//什么也没发生
});

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

$（文档）.ready（函数（）{

$（“#drdCriterias”）.change（函数（）{
var table=document.getElementById（“tableCriterias”）；
var行=table.insertRow（-1）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
cell1.innerHTML=$（'#drdCriterias'）.val（）；
cell2.innerHTML=$（'#drdCriterias:selected'）.text（）；
cell3.innerHTML=''；
向上单击（）；
});
函数upsClick（）{
$（“tr.ups”）。单击（函数（）{
警惕（“嗨”）；//什么也没发生
});
}

使用事件委派：

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

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