javascript - 如何对动态添加的元素执行动态操作？

Question

我的目标:

• 使用 JS/Jquery 动态填充“performer-payments”表
• 对于表格中的每一行(动态添加的)，其中一个数据单元格包含一个下拉框。
• 此下拉框应在选择某个选项时使另一个下拉框可见(在同一单元格中)。否则，第二个下拉菜单应该是不可见的。
• 我在其他地方通过 toggleVisible 函数实现隐藏/显示动态，它只是添加由 css 标记的自定义类以隐藏或显示元素。

相关代码:

我要填充的表:

<table id='performer-payments' class='performer-profile payments-table'>              
    <tr>
        <th> Period </th>                                                             
        <th> Amount </th>                                                             
        <th> Paid? </th>                                                              
    </tr>
</table>

填充表格的代码:

for (period in data['Performers'][performer]['Payments']) {
    var amount = utils.calcPerformerCut(data, performer, period);                 
    var row = "<tr>";
    row += "<td> " + period + " </td>";
    row += "<td> " + amount + " $ </td>";
    row += "<td>";
    row += "<div class='performer-profile payment-status'>";
    row += data['Performers'][performer]['Payments'][period];
    row += "</div>";
    row += "<select id='payment-status-" + performer + "-" + period + "' class='perfomer-profile hidden-onload displayNone payment-status-menu'>";
    row += "<option value='paid'>Paid</option>";
    row += "<option value='unpaid'>Unpaid</option>";
    row += "<option value='transfer'>Transfer to...</option>";
    row += "</select>";
    row += "<select id='payment-transfer-period-" + performer + "-" + period + "' class='performer-profile hidden-onload displayNone payment-period-menu'>";
    for (var i=0; i < data['Periods'].length; i++) {                              
        row += "<option value='" + period + "'>" + period + '</option>';          
    }
    row += "</select>";
    row += "</td>";
    row += "</tr>";

    $('#performer-payments').append(row);
    $('#performer-payments').on('change', {perf: performer, per: period}, function (even) {
        if (even.target.value == 'transfer') {
            utils.toggleVisible($('#payment-transfer-period-' + even.data.perf + '-' + even.data.per), true);
        } else {
            utils.toggleVisible($('#payment-transfer-period-' + even.data.perf + '-' + even.data.per), false);
        }
    });
}

作为引用，切换可见性的代码:

exports.toggleVisible = function (selector, visible) {
    if (visible) {
        selector.removeClass('displayNone').addClass('displayBlock');
    } else {
        selector.removeClass('displayBlock').addClass('displayNone');
    }
}

这有(至少)两个问题:

• #payment-transfer-period-... 选择框永远不会显示，即使在第一个选择框中选择了“转移”选项也是如此。从调试工作来看，在我看来，#payment-transfer-period-.. 由于某种原因可能还不是有效对象，或者类似的东西。
• (显然，真的)，on-change 事件被触发了 N 次(N=周期数)，因为我只是告诉程序在表中的某些内容发生变化时触发。我希望它只针对相关的下拉菜单触发，但是当我尝试将 #payment-status-... 作为选择器添加到 .on() 函数时，它永远不会触发。

注意:总的来说，我欢迎对此的反馈——我是一名经验丰富的程序员，但对 HTML/JS/Jquery 的经验很少。此外，我决定不为该项目使用模板，因为我正在尝试学习基础知识，所以如果您看到我“动态”向表中添加行的方式而得了胰腺炎，我深表歉意，但这部分是故意的。

除此之外，如果这里有什么不清楚的地方，请要求澄清。

编辑:这里是数据结构的相关部分:

data = {
    'Performers': {
        'Dira Klaggen': {
            'Payments': {
                'Q1': 'Paid',
                'Q2': 'Paid',
                'Q3': 'Unpaid'
            },
        },
        'Holden Bolden': {
            'Payments': {
                'Q2': 'Transferred to Q3',
                'Q3': 'Unpaid'
            }
        },
        'Manny Joe': {
            'Payments': {
                'Q1': 'Paid',
                'Q2': 'Unpaid',
                'Q3': 'Unpaid',
            }
        }
    },
    'Periods': [
        'Q1',
        'Q2',
        'Q3'
    ]
}  

Answer 1

您没有将 change 处理程序附加到正确的元素。我应该是行中的第一个 select...而不是整个 table。

试试这个改变处理程序:

$('#performer-payments').find('#payment-status-' + performer + '-' + period).on('change', function(){
  if ($(this).val() == 'transfer') {
    $(this).next('select').show();
  } else {
    $(this).next('select').hide();
  }
});

---

第二种方法:
您可以通过为第一个 select 使用类而不是“复杂的”唯一 id 来简化它。

假设您使用类“payment-status”:

处理程序将是:

$('#performer-payments').on('change', '.payment-status', function(){
  if ($(this).val() == 'transfer') {
    $(this).next('select').show();
  } else {
    $(this).next('select').hide();
  }
});

并且此处理程序可以在行附加循环之外，因为它使用 delegation .