Creation of DOJO buttons with the Javascript function causing conflicts in the created buttons

advertisements

my apologies for any mistake in english, I am brazilian.

I have a website with DOJO library, I use it in many things.

I am having some dificulty to create buttons in javascript.

I wrote a function to create the buttons, it is working, creating buttons.

But, when a new button is created, the former button lost the event "onclick".

It can be viewed here: http://jsbin.com/xuzevi/edit?html,js,output

To create the button, I used this code:

require([ 'dojo/dom', 'dojo/parser', 'dijit/form/Button', 'dojo/domReady!' ],
        function( dom, parser, Button)
        {
            var div_Compra = document.getElementById(p_Div);
            if( ! div_Compra ) { console.log('ERRO - div_Compra: '+p_Div); return false; }

            var botao = new Button({ label: '' });
            if( ! botao ) { console.log('ERRO - botao'); return false; }

            botao.startup();
            botao.set('iconClass', 'dijitEditorIcon dijitEditorIconSelectAll');
            botao.set('showLabel', false);
            botao.placeAt(div_Compra);
            botao.on('click', function() { Mensagem(p_Indice); });
        }
);

Thanks.


The issue is not in the above mentioned code. Main problem is your usage of innerHTML in CPR_Compra.Cadastro method. You cannot think, the dojo dijits as just HTML tags, they are DOM objects, nodes and more. When you updated the div_Cadastro.innerHTML, it kind of destroyed the wigit, but retained the HTML tags, so the onclick event stopped working.

Instead of using innerHTML use appendChild, that way the dom nodes wont be destroyed. below is the JSBin with working implementation.

http://jsbin.com/butacuquza/edit?js,output