分配onclick事件dojo的不同方式

时间:2013-08-13 13:26:34

标签: dojo dijit.form

第二种方法,我对输入ID进行硬编码并将它们连接到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 )
      }

我在dojo中错过了一些事件处理原则吗?

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

2 个答案:

答案 0 :(得分:0)

您正在混合DOM节点ID和Dijit ID。这可能是您的代码无法正常工作的可能原因。 要解决此问题,您可以尝试以下方法:

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

在dojo中,小部件和DOM节点之间存在差异。因此,使用DOM函数(通过ID或类名检索DOM节点)并不总是有效。他们可以工作,但事实并非总是如此。

答案 1 :(得分:0)

您也可以按照以下方式调用您的函数requiredFunction()

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

这将减少您的循环时间并按照您的需要进行类似工作。

一切顺利。