동적으로 요소에 이벤트를 추가 할 수 있습니까?

Question

EDM 모델을 가지고 있는데, 동적 UI를 생성하려고하지만 더 많은 이벤트를 추가하려고하지 않습니다. 1 개를 선택하십시오.

다른 말로하면, 1 개의 선택에서만 작동하며 그 이상은 작동하지 않습니다. 여기

 function addEvents(id) { 
      $('body').on('click', '#entities_' + id, function(event) { 
      var $e = $(event.target); 
      var entityIndex = $("#entities_" + id + " option:selected").index(); //$e.val(); 
      var entity = entities[entityIndex - 1]; 
      var columns = entity.property; // if index is not -1 


      var $entities_cols = $("#entities_" + id + "_cols").empty(); 
      $.each(columns, function(index, e) { 
       var selectColumnHtmlId = 'selectcolumn_' + e.name; 
       var $selectColumnLabel = $('<label />', { 
       'for': selectColumnHtmlId, 
       text: e.name 
       }); 
       $selectColumnLabel.appendTo($entities_cols); 
       $('<input />', { 
       type: 'checkbox', 
       id: selectColumnHtmlId, 
       value: e.name 
       }).prependTo($selectColumnLabel); 
      }); 

      if (id <= config.expandLimit) 
       addExpand(++id, entity.navigationProperty); 
      }); 
     } 

이 완료 예이다 -, https://jsfiddle.net/ntbkyuau/3/

Answer 1

가이 변경하여 작업을 제작

function addEvents(id) { 
      var $entities = $('#entities_' + id); 
      $('body').on('click', $entities, function(event) { 
      var $e = $(event.target); 
      var entityIndex = $("#entities_" + id + " option:selected").index(); //$e.val(); 
      var entity = entities[entityIndex - 1]; 
      var columns = entity.property; // if index is not -1 


      var $entities_cols = $("#entities_" + id + "_cols").empty(); 
      $.each(columns, function(index, e) { 
       var selectColumnHtmlId = 'selectcolumn_' + e.name; 
       var $selectColumnLabel = $('<label />', { 
       'for': selectColumnHtmlId, 
       text: e.name 
       }); 
       $selectColumnLabel.appendTo($entities_cols); 
       $('<input />', { 
       type: 'checkbox', 
       id: selectColumnHtmlId, 
       value: e.name 
       }).prependTo($selectColumnLabel); 
      }); 

      if (id <= config.expandLimit) 
       addExpand(++id, entity.navigationProperty); 
      }); 
     }