различные способы присвоения событий onclick dojo

Question

Второй подход, в котором я жестко кодирует входные идентификаторы и подключаю их к событиям onclick, работает правильно.

Но, когда я использую первый подход, он не работает. Код выполняется таким образом.

 select1.on('change',function(evt) { 
      requiredFunction(select8.id);//select9 is not present (so I changed loop end         value from inputs.length -1 to inputs.length -2) 
     } 

Я пропустил некоторые правила обработки событий в додзё?

Approach1:

 function assignOnClickEvents(table) { 
      var inputs = document.getElementById(table).getElementsByClassName('classname'); 
      for (var i = 0; i < (inputs.length - 1); i++) {      
       dijit.byId(inputs[i].id).on('change', function (evt) { 
        requiredFunction(inputs[i+1].id); 
       }); 
      } 
     } 

Approach2:

 function assignOnClickEvents() {     

      var select1 = dijit.byId('select1'); 
      var select2 = dijit.byId('select2'); 
      var select3 = dijit.byId('select3'); 
      var select4 = dijit.byId('select4'); 
      var select5 = dijit.byId('select5'); 
      var select6 = dijit.byId('select6'); 
      var select7 = dijit.byId('select7');     
      var select8 = dijit.byId('select8'); 
      var select9 = dijit.byId('select9'); 
      select1.on('change', function (evt) { 
       requiredFunction('select2'); 
      }); 
      select2.on('change', function (evt) { 
       requiredFunction('select3'); 
      }); 
      select3.on('change', function (evt) { 
       requiredFunction('select4'); 
      }); 
      select4.on('change', function (evt) { 
       requiredFunction('select5'); 
      });     
      select5.on('change', function (evt) { 
       requiredFunction('select6'); 
      }); 
      select6.on('change', function (evt) { 
       requiredFunction('select7'); 
      }); 
      select7.on('change', function (evt) { 
       requiredFunction('select8'); 
      }); 
      select8.on('change', function (evt) { 
       requiredFunction('select9'); 
      }); 
     } 

Answer 1

Вы смешивания идентификаторы узлов DOM и идентификаторы Dijit. Это может быть возможной причиной, по которой ваш код не работает. Чтобы исправить это, вы можете попробовать следующий подход:

var inputs = dijit.findWidgets(table); // Returns widgets, not DOM nodes 
for(var i = 0;i < inputs.length - 1;i++) { 
    inputs[i].on('change', function(evt) { 
     // Remind: this returns the widget ID, not the DOM ID 
     requiredFunction(inputs[i+1].id); 
    }); 
} 

В додзё есть разница между виджетами и узлами DOM. Поэтому использование DOM-функций (для получения узла DOM по идентификатору или по имени класса) не всегда будет работать. Они могут работать, но это не всегда факт.

Answer 2

Вы также можете позвонить функции requiredFunction() следующим образом:

<input data-dojo-attach-event="onChange:requiredFunction"></input> 

Это позволит сократить время цикла и работает подобно тому, как вы хотите.

Все самое лучшее.