jquery add new checkbox, when clicked the new checkbox, it happens nothing

Question

I have three tables. They all contains some checkboxes. when a checkbox in the first table is checked, it will add some new checkboxs into the second table. But when I check a checkbox in the second table, it happens nothing. It seems that the checkbox event only observe the checkbox in the first table. Following is the episode of my js code.

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');

  });
}

This is duplicate to: http://stackoverflow.com/questions/29052013/jquery-change-method-does-not-work-for-dynamically-created-check-box in short, you need to delegate the event to the parent container as the event that you binded to the checkbox is only for existing checkboxes — Saar, Oct 05 '15 at 08:35

score 1 · Answer 1 · answered Oct 05 '15 at 08:39

Try below code if it is working. As some checkboxes are generated dynamically so you have to use jQuery .on. If you compare my codes with yours then you can find I have changed 2nd line of code.

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');

      });

}

Please try and let me know if it working.

jquery add new checkbox, when clicked the new checkbox, it happens nothing

1 Answers1