setHtml and javascript onclick function not called when checked on android and iphone

[ravimone]

Ext.define('Fxtrade.view.ClosingRates', {
    extend: 'Ext.Container',
    requires: [
    current = new Date()
    ],
    alias: 'widget.ClosingRates',
    config: {   
        baseCls : 'whitebg',
    
items:[
        {
        items:[
        {
            xtype:'panel',
            layout:'card',
            scrollable: true,
            id:'thirdpanel',
            height:'75%',
            style:'background-color:white;'
        },
        {
            xtype: 'formpanel',
            id : 'ClosingPanel'
        }
        ]
        }],
        listeners : {
            painted : getloadAccor
           
        }
    }
});

function getloadAccor() {       
                     
    var accordionHtml= '<div id="AccordionContainer" class="AccordionContainer">';
    for(var i=0; i<1; i++){                 
        accordionHtml+='<div onclick="runAccordion(1); >\n\
       <div id="closedOrder"  class="AccordionTitle" onselectstart="return false;">Accordion 1</div></div>\n\
<div id="Accordion1Content" class="AccordionContent">I Am Accordion 1. </div>\n\
<div onclick="runAccordion(2);"><div class="AccordionTitle" onselectstart="return false;">Accordion 2</div>\n\
</div>  <div id="Accordion2Content" class="AccordionContent">I Am Accordion 2.  </div>\n\
<div onclick="runAccordion(3);"><div class="AccordionTitle" onselectstart="return false;">Accordion 3</div>  </div>\n\
<div id="Accordion3Content" class="AccordionContent">I Am Accordion 3.  </div>\n\
<div onclick="runAccordion(4);"><div class="AccordionTitle" onselectstart="return false;">Accordion 4</div>  </div>\n\
<div id="Accordion4Content" class="AccordionContent">I Am Accordion 4.  </div><div onclick="runAccordion(5);"><div class="AccordionTitle" onselectstart="return false;">Accordion 5</div>  </div>  <div id="Accordion5Content" class="AccordionContent">I Am Accordion 5.  </div>';      
                   
   }
   
  
    accordionHtml+='</div>';
    var CurrView=Ext.getCmp('thirdpanel');
    CurrView.removeAll( true, true );
                
    Ext.getCmp('thirdpanel').setHtml(accordionHtml);
                
}

//And i have included a js file, which has this 'runAccordion' function,
When i checked in my desktop system, chrome browser, the function is called, and working as expected,
But when checked on device android or iphone, the fucntion is not called, the onclick event is not called.

PLEASE HELP ME TEAM, I AM LEFT WITH VERY LESS TIME,
PLEASE HELP ME ASAP.

[jay@moduscreate.com]

Do not use onclick handlers! There is no such thing as a "click" event in mobile browsers. This is why it's not working.

What you should be doing is registering a "tap" listener via Ext.get or Ext.query.

[mitchellsimoens]

I would probably use one listener and delegate it to work with the elements you want. Here is an example:

new Ext.Container({
    fullscreen : true,
    scrollable : true,
    html       : [
        '<div>I do not have a listener on me</div>',
        '<div class="listenToMe"><span>The parent div has a tap listener on it!</span></div>',
        '<div>I do not have a listener on me</div>',
        '<div class="listenToMe"><span>The parent div has a tap listener on it!</span></div>',
        '<div>I do not have a listener on me</div>',
        '<div class="listenToMe"><span>The parent div has a tap listener on it!</span></div>'
    ].join(''),
    listeners  : {
        element  : 'element',
        delegate : 'div.listenToMe',
        tap      : function() {
            console.log('div.listenToMe was tapped on');
        }
    }
});

I tried to color the mappings, the delegate event config takes in a DOM query selector, in this case, any <div> that has a class of listenToMe will fire the tap event. The element config configures the tap to work on the element of the component it is on.