Javascript jquery添加新复选框，当单击新复选框时，不会发生任何事情

我有三张桌子。它们都包含一些复选框。选中第一个表中的复选框后，它将向第二个表中添加一些新的复选框。但是，当我选中第二个表中的复选框时，它什么也没有发生。复选框事件似乎只观察第一个表中的复选框。下面是我的js代码的一集

function bindEvent4CheckboxArea() {
  $('input[type=checkbox]').change(function() {
    initController.initGlobalData(false);
    $('input[type=checkbox]').each(function() {
      if ($(this).is(':checked')) {
        if ($(this).attr('id').indexOf('trade') >= 0) {
          var tradeId = $(this).attr('id');
          var tradeIdByInt = tradeId.substring(6);
          globalVar.userSelectedTrade.push(tradeId);
          if (tradeIdByInt < 100) {
            globalVar.userSelectedFirstTrade.push(tradeIdByInt);
          } else if (tradeIdByInt < 10000) {
            globalVar.userSelectedSecondTrade.push(tradeIdByInt);
          }

        } else {
          globalVar.userSelectedIndex.push($(this).attr('id'));
        }
      }
    });
    //add new checkbox into the second table
    render.drawTradeInfoArea('#second_trade');
    // add new checkbox into the third table
    render.drawTradeInfoArea('#third_trade');

  });
}

函数bindEvent4CheckboxArea（）{
$（'input[type=checkbox]'）。更改（函数（）{
initController.initGlobalData（false）；
$（'input[type=checkbox]'）。每个（函数（）{
如果（$（this）.is（':checked'））{
if（$（this）.attr（'id'）.indexOf（'trade'）>=0）{
var tradeId=$（this.attr（'id'）；
var tradeidbynt=tradeId.substring（6）；
globalVar.userSelectedTrade.push（tradeId）；
如果（交易量小于100）{
globalVar.userSelectedFirstTrade.push（tradeIDbynt）；
}否则如果（交易量小于10000）{
globalVar.userSelectedSecondTrade.push（tradeidbynt）；
}
}否则{
globalVar.userSelectedIndex.push（$（this.attr（'id'））；
}
}
});
//将新复选框添加到第二个表中
render.drawTradeInfoArea（'second#u trade'）；
//将新复选框添加到第三个表中
render.drawTradeInfoArea（'third#u trade'）；
});
}

如果代码正常，请尝试下面的代码。由于某些复选框是动态生成的，因此必须使用jQuery。如果你比较我的代码和你的代码，你会发现我已经改变了第二行代码

function bindEvent4CheckboxArea() {
      $( "body" ).on( "change", "input[type=checkbox]", function() {
        initController.initGlobalData(false);
        $('input[type=checkbox]').each(function() {
          if ($(this).is(':checked')) {
            if ($(this).attr('id').indexOf('trade') >= 0) {
              var tradeId = $(this).attr('id');
              var tradeIdByInt = tradeId.substring(6);
              globalVar.userSelectedTrade.push(tradeId);
              if (tradeIdByInt < 100) {
                globalVar.userSelectedFirstTrade.push(tradeIdByInt);
              } else if (tradeIdByInt < 10000) {
                globalVar.userSelectedSecondTrade.push(tradeIdByInt);
              }

            } else {
              globalVar.userSelectedIndex.push($(this).attr('id'));
            }
          }
        });
        //add new checkbox into the second table
        render.drawTradeInfoArea('#second_trade');
        // add new checkbox into the third table
        render.drawTradeInfoArea('#third_trade');

      });

}

函数bindEvent4CheckboxArea（）{
$（“body”）。在（“更改”、“输入[type=checkbox]”上，函数（）{
initController.initGlobalData（false）；
$（'input[type=checkbox]'）。每个（函数（）{
如果（$（this）.is（':checked'））{
if（$（this）.attr（'id'）.indexOf（'trade'）>=0）{
var tradeId=$（this.attr（'id'）；
var tradeidbynt=tradeId.substring（6）；
globalVar.userSelectedTrade.push（tradeId）；
如果（交易量小于100）{
globalVar.userSelectedFirstTrade.push（tradeIDbynt）；
}否则如果（交易量小于10000）{
globalVar.userSelectedSecondTrade.push（tradeidbynt）；
}
}否则{
globalVar.userSelectedIndex.push（$（this.attr（'id'））；
}
}
});
//将新复选框添加到第二个表中
render.drawTradeInfoArea（'second#u trade'）；
//将新复选框添加到第三个表中
render.drawTradeInfoArea（'third#u trade'）；
});
}

请尝试让我知道它是否工作。

这是重复到：简而言之，您需要将事件委托给父容器，因为绑定到复选框的事件仅适用于现有复选框