title: Bind an even to dynamically appended html in ionic 3
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>I am developing an app with the help of ionic 3 
  in the application i am generating dynamic html from .ts file and appending in HTML  . Now i want to bind and click event to html 
  
  After user done an click event i want to refresh the content present in the dynamically generated html
  please help to solve this 
  
  
      enter code here
  my .ts file
  with the below code i am generating html and appending to html
   outputHtml = '&lt;div id="rpl_crt"&gt;&lt;div class="sys_ot"&gt;&lt;h6 class="itm_nme"&gt;My Cart&lt;/h6&gt;';
        var innerHTML = '';
        let amount = 0;
        let savings = 0;
        for (let dt in data) {
          amount += data[cart].vv.value;
          savings += data[cart].aa.value;
          innerHTML += '&lt;div class="cartlist"&gt;'
          innerHTML += '&lt;div class="row "&gt;'
          innerHTML +=  '&lt;div col-3 class="itemimg"&gt;'
          let img_url=data[cart].product.images ? ConfigurationPage.commonURL+data[dt].aa.images[1].url:'assets/img/place_holder.png'
          innerHTML +=    '&lt;img src="'+img_url+'" &gt;'
          innerHTML +=  '&lt;/div&gt;'
          innerHTML +=  '&lt;div col-9&gt;'
          innerHTML +=    '&lt;h6&gt;' + data[dt].aa.name + '&lt;/h6&gt;'
          innerHTML +=    '&lt;/div&gt;'
          innerHTML +=  '&lt;/div&gt;'
          innerHTML +='&lt;div class="btn_qnty row"&gt;'
          innerHTML +=  '&lt;div col-5&gt;'
          innerHTML +=  '&lt;div class="row"&gt;'
          innerHTML +=    '&lt;div col-3 click="abc(dt)"&gt;&lt;span class="circle"&gt;-&lt;/span&gt;&lt;/div&gt;'
          innerHTML +=    '&lt;div text-center col-6 &gt;'+data[dt].q+'&lt;/div&gt;'
          innerHTML +=    '&lt;div col-3 (click)="xyz(dt)"&gt;&lt;span class="circle " &gt;+&lt;/span&gt;&lt;/div&gt;'///I want an click event here to do some action 
         // 
          innerHTML +=  '&lt;/div&gt;'
          innerHTML +=  '&lt;/div&gt;'
          innerHTML +=  '&lt;div col-7&gt;'
          innerHTML +=    '&lt;div class="prd_dtl"&gt;'
          innerHTML +=      '&lt;div class="proctprice"&gt;'
          if (data[dt].ss.value != 0) {
            innerHTML += '&lt;span class="orgin_prc"&gt;' + this.currency.transform((parseFloat(data[dt].tp.value) + parseFloat(data[dt].ss.value)), 'INR') + '&lt;/span&gt;'
          }
  
          innerHTML += '&lt;span class="dsc_prc"&gt;' + this.currency.transform(data[dt].tp.value, 'INR') + '&lt;/span&gt;'
          innerHTML +=    '&lt;/div&gt;'
          if (data[cart].savings.value != 0) {
            innerHTML += '&lt;p class="save_prc"&gt;' + this.currency.transform(data[dt].ss.value, 'INR') + '&lt;/p&gt;'
          }
          innerHTML +=    '&lt;/div&gt;'
          innerHTML +=  '&lt;/div&gt;'
          // innerHTML += '&lt;div class="quantity"&gt;' + data[dt].qt+ '&lt;/div&gt;'
          innerHTML += '&lt;/div&gt;'
          innerHTML += '&lt;/div&gt;'
          let abc={
            code:data[dt].aa.code,
            data:data[dt]
          }
          clickEventMethod.push(abc);
        }
        this.totalAmount = amount;
        this.totalSaving = savings;
        // outputHtml += '&lt;/ion-list&gt;';
        let footerHtml = '&lt;div class="row cartfooter"&gt;'
        footerHtml += '&lt;div col-4&gt;&lt;p&gt;Total amount&lt;/p&gt;' + this.currency.transform(this.totalAmount, 'INR') + '&lt;/div&gt;'
        footerHtml += '&lt;div col-4&gt;&lt;p&gt;Total amount&lt;/p&gt;' + this.currency.transform(this.totalSaving, 'INR') + '&lt;/div&gt;'
        footerHtml += '&lt;div col-4&gt;&lt;p&gt;Say &lt;strong&gt;Checkout&lt;/strong&gt; to checkout all items&lt;/p&gt;&lt;/div&gt;'
        console.log(clickEventMethod,'clickEventMethod')
        outputHtml += innerHTML + footerHtml + '&lt;/div&gt;&lt;/div&gt;';
       
          this.appenData.nativeElement.insertAdjacentHTML('beforeend', outputHtml);//Appending the data at the end of the ion-content      // break;     
         
  HTML
  &lt;ion-header [ngClass]="!isFromHome ? 'leftPaddingCssTitle':'cssTitle'"&gt;
  
    &lt;ion-navbar color="danger"&gt;
      &lt;ion-title&gt;{{headerName}}&lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
  &lt;/ion-header&gt;
  
  
  &lt;ion-content padding&gt;
      &lt;div class="hint"&gt;
          &lt;p&gt;To go back , say &lt;b&gt;Go Back&lt;/b&gt;&lt;/p&gt;
         &lt;p&gt;To Go cart , Say &lt;b&gt;Open Cart &lt;/b&gt; or &lt;b&gt;Go to Cart&lt;/b&gt;&lt;/p&gt;
            
         &lt;/div&gt;
    &lt;div class="main" #appenData id="main"&gt;
  
    &lt;/div&gt;
  &lt;ion-content&gt;</code></pre>
  </div>
  </div>
  </p>