только некоторые элементы элемента формы обнаруживаются

Question

спасибо за помощь. У меня есть ряд элементов формы для целей пользовательского интерфейса в веб-приложении. Я использую jQuery для создания элементов и добавления слушателей. Элементы управления в #topbar DIV не прослушиваются, когда происходят события, но те, которые находятся в #sidebar DIV. Я не знаю, почему. Вы можете помочь, спасибо. Ниже приведена функция создания элементов управления ...

function constructToolbars(){ 
     //----------------------------TOPBAR------------- 
     //ZONE 
     $('#topbar').html('ZONE: '); 

     var zoneRadios = ["All", "None"]; 
     var zoneRadio; 
     for(var i=0; i<zoneRadios.length; i+=1){ 
      zoneRadio = zoneRadios[i]; 
      $('<input />', { 
       type: 'radio', 
       id: 'zone' + zoneRadio, name: "zoneRadios", value: zoneRadio, 
       checked: zoneRadio === 'All' 
       }).appendTo('#topbar'); 
      $('<label />', { 
       'for': 'zone' + zoneRadio, text: zoneRadio 
       }).appendTo('#topbar'); 
     } 
     //THIS LISTENER IS NOT TRIGGERED WHEN USER CHANGES 
     $("input:radio[name=zoneRadios]").on("change", readRadios); 

     var regions = ART.regions; 
     var region; 
     for(var i=0; i<regions.length; i+=1){ 
      region = regions[i]; 
      $('<input />', { 
       type: 'checkbox', "class": "zones", 
       id: 'zone' + region, name: region, value: region, 
       checked: true 
       }).appendTo('#topbar'); 
      $('<label />', { 
       'for': 'zone' + region, text: region 
       }).appendTo('#topbar'); 
     } 
     //THIS LISTENER IS NOT TRIGGERED WHEN USER CHANGES 
     $('.zones').on("change", readToolbars); 


     //TIME 
     topbar.innerHTML += " ---- TIME: "; 
     var timeRadios = ["Current", "Custom"]; 
     var timeRadio; 
     for(var i=0; i<timeRadios.length; i+=1){ 
      timeRadio = timeRadios[i]; 
      $('<input />', { 
       type: 'radio', 
       id: 'time' + timeRadio, name: "timeRadios", value: timeRadio, 
       checked: timeRadio === 'Current' 
       }).appendTo('#topbar'); 
      $('<label />', { 
       'for': 'time' + timeRadio, text: timeRadio 
       }).appendTo('#topbar'); 
     } 
     //THIS LISTENER IS NOT TRIGGERED WHEN USER CHANGES 
     $("input:radio[name=timeRadios]").on("change", readRadios); 

     topbar.innerHTML += ": "; 
     var dateFields = ["From", "To"]; 
     var dateField; 
     for(var i=0; i<dateFields.length; i+=1){ 
      dateField = dateFields[i]; 
      $('<label />', { 
       'for': 'date' + dateField, text: dateField 
       }).appendTo('#topbar'); 
      $('<input />', { 
       type: 'date', "class": "times", 
       id: 'date' + dateField, name: dateField, value: "<?php echo date('Y-m-d', strtotime(date('Y/m/d'))); ?>", 
       }).appendTo('#topbar'); 
     } 
     $('<input />', { 
      type: 'submit', "class": "times", 
      id: 'dateGo', name: 'timeGo', value: 'Go', 
      }).appendTo('#topbar'); 
     //THIS LISTENER IS NOT TRIGGERED WHEN USER CHANGES 
     $('.times').on("change", readToolbars); 

     //------------------SIDEBAR------------------ 
     //PLAYERS 
     $('<p>',{text: 'PLAYERS'}).appendTo('#sidebar'); 
     var playerRadios = ["All", "None"]; 
     var playerRadio; 
     for(var i=0; i<playerRadios.length; i+=1){ 
      playerRadio = playerRadios[i]; 
      $('<input />', { 
       type: 'radio', 
       id: 'player' + playerRadio, name: "playerRadios", value: playerRadio, 
       checked: playerRadio === 'All' 
       }).appendTo('#sidebar'); 
      $('<label />', { 
       'for': 'player' + playerRadio, text: playerRadio 
       }).appendTo('#sidebar'); 
     } 
     //add event listener to this set of radio buttons 
     $("input:radio[name=playerRadios]").on("change", readRadios); 

     var players = []; 
     var numReviewers = ART.currentReviewers.length; 
     ART.currentReviewers.sort(byAscending('loginName')); 
     for (var i=0; i<numReviewers; i+=1){ 
      players.push(ART.currentReviewers[i].loginName); 
     } 
     var player; 
     for(var i=0; i<numReviewers; i+=1){ 
      player = players[i]; 
      $('<br />').appendTo('#sidebar'); 
      $('<input />', { 
       type: 'checkbox', "class": "players", 
       id: 'player' + player, name: player, value: player, 
       }).appendTo('#sidebar'); 
      $('<label />', { 
       'for': 'zone' + player, text: player 
       }).appendTo('#sidebar'); 
     } 
     //add event listener to checkbox elements of this class 
     $('.players').on("change", readToolbars); 

     //ACTIVITY 
     $('<p>',{text: 'ACTIVITY'}).appendTo('#sidebar'); 
     var activityRadios = ["All", "None"]; 
     var activityRadio; 
     for(var i=0; i<activityRadios.length; i+=1){ 
      activityRadio = activityRadios[i]; 
      $('<input />', { 
       type: 'radio', 
       id: 'activity' + activityRadio, name: "activityRadios", value: activityRadio, 
       checked: activityRadio === 'All' 
       }).appendTo('#sidebar'); 
      $('<label />', { 
       'for': 'activity' + activityRadio, text: activityRadio 
       }).appendTo('#sidebar'); 
     } 
     //add event listener to this set of radio buttons 
     $("input:radio[name=activityRadios]").on("change", readRadios); 

     var activities = ART.alertCategories; 
     activities.unshift("touches"); 
     var numActivities = activities.length; 
     var activity; 
     for(var i=0; i<numActivities; i+=1){ 
      activity = activities[i]; 
      $('<br />').appendTo('#sidebar'); 
      $('<input />', { 
       type: 'checkbox', "class": "activities", 
       id: 'activity' + activity, name: activity, value: activity, 
       }).appendTo('#sidebar'); 
      $('<label />', { 
       'for': 'activity' + activity, text: activity 
       }).appendTo('#sidebar'); 
     } 
     //add event listener to checkbox elements of this class 
     $('.activities').on("change", readToolbars); 
    } 

Answer 1

Это линии, которые фактически перезагружают HTML и, следовательно, манипулируют DOM.

topbar.innerHTML += " ---- TIME: " & topbar.innerHTML += ": "

это фактически эквивалентно сброса HTML, как

topbar.innerHTML = topbar.innerHTML + " ---- TIME: "

Пожалуйста связать все события в конце все вместе, чтобы избежать этой ситуации, или использовать более высокий слушателя, как $('#topbar').on("change", '.zones', readToolbars)

вместо $('.zones').on("change", readToolbars)