Mryntu

I am working on a module where i have generated few DOM elements dynamically. But when i am trying to call certain function on some events then its not getting called. Here is the code sample. Here you can see i am calling getData method on "change" event but its not being called

getData: function() 
 var data = this._super();
 data.additional_data.bank_type = $('input[name="payment\[bank_type\]"]:checked').val();
 data.additional_data.emi = $('input[name="payment\[emi\]"]:checked').val();
 data.additional_data.email = this.getEmail();
 console.log($('input[name="payment\[emi\]"]:checked').val());
 return data;
 ,

 getEmi: function (emiCount) 
 var total = priceUtils.formatPrice(quote.totals().grand_total, quote.getPriceFormat());
 var rowTotal = quote.totals().grand_total;
 var item = '';
 var html = '';
 var i;
 for (i=1; i<=emiCount; i++ ) 
 if (i==1) 
 item = "<li>" +
 "<input type='radio' name='payment[emi_type]' data-bind='event: change: getData' id='emi" + i + "' value='" + i + "'>" +
 "<label class='label' for='emi" + i + "'>Tek Ödeme, Toplam: "+total+"</label>" +
 "</li>";
 else 
 rowTotal = parseInt(rowTotal)/i;
 item = "<li>" +
 "<input type='radio' name='payment[emi_type]' data-bind='event: change: getData' id='emi" + i + "' value='" + i + "'>" +
 "<label class='label' for='emi" + i + "'>"+i+" Taksit, Aylık Taksit: "+priceUtils.formatPrice(rowTotal, quote.getPriceFormat())+" Toplam: "+total+"</label>" +
 "</li>";
 
 html = html+item;
 

 console.log(html);
 $('.emi-list').html(html);
 ,

You did not mention on which html element you are trying to call change event.Can you tell me more about binding template.

I used js code like.

/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
/*jshint browser:true jquery:true*/
/*global alert*/
define([
 "jquery",
 'ko',
 'uiComponent',
 'Magento_Ui/js/modal/alert',
 "jquery/ui",
 "mage/translate",
 "mage/mage",
 "mage/validation"
], function ($, ko, Component, alert, mage) 
 "use strict";
 var totalCustomer= ko.observableArray([]);
 var results= ko.observableArray([]);
 function feedShow(name, email) 
 var self = this;
 self.name = name;
 self.email = email;
 
 return Component.extend(
 productList: ko.observableArray([]),
 initialize: function() 
 this._super();
 ,
 /** Initialize observable properties */
 initObservable: function () 
 this._super()
 .observe('msgSaved')
 ;
 this.uname = ko.observable('');
 this.email = ko.observable('');
 this.phone = ko.observable('');
 this.msg = ko.observable('');
 return this;
 ,
 /**
 * Validate feedback form
 */
 validateForm: function () 
 var form = '#feedback-form';
 return $(form).validation() && $(form).validation('isValid');
 ,
 submitFeedback: function () 
 /* $.ajax(this.getFeedbackUrl).done(
 function() 
 this.msgSaved(true)
 .bind(this)
 );*/
 if (!this.validateForm()) 
 return;
 
 var data = 'name':this.uname(),'email':this.email(),'phone':this.phone(),'message':this.msg(),'status':0;
 // if(this.validateForm())

 // 
 // console.log(data);
 $.ajax(
 url: this.getFeedbackUrl,
 data: data,
 type: 'post',
 dataType: 'json',
 context: this,
 beforeSend: this._ajaxBeforeSend,
 success: function (response) 
 this.msgSaved(true);
 this.uname('testing');
 alert(
 content: $.mage.__('Thanks for Submitting.')
 );
 ,
 complete: this._ajaxComplete
 );
 ,
 totalfeeds:function()
 console.log('test');
 $.ajax(
 url:'http://magento2.local/feedback/entry/show',
 type: 'post', 
 dataType: 'json',
 contentType: 'application/json',
 context: this,
 showLoader:true,
 beforeSend: this._ajaxBeforeSend,
 success: function (response) 
 var jsonTempStringified = JSON.stringify(response);
 var jsonTempStringifiedParsed = JSON.parse(jsonTempStringified);
 this.productList(jsonTempStringifiedParsed);
 // results(jsonTempStringifiedParsed);
 ,
 complete: this._ajaxComplete
 );

 ,
 deleteFeeds:function(parent,data)
 alert(
 content: 'Are you sure want to delete record!'
 );
 var jsonTempStringified = JSON.stringify(data);
 var jsonTempStringifiedParsed = JSON.parse(jsonTempStringified);
 var fid = jsonTempStringifiedParsed.fid;
 var data = 'fid':fid;
 $.ajax(
 url:'http://magento2.local/feedback/entry/delete',
 data: data,
 type: 'post',
 dataType: 'json',
 context: this,
 beforeSend: this._ajaxBeforeSend,
 success: function (response) 
 this.totalfeeds();
 ,
 complete: this._ajaxComplete
 );
 ,
 defaults: 
 msgSaved: false,
 template: 'Smart_Feedback/feedback',
 
 );

);

Binding template .html file.

<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div>
 <!-- ko ifnot: msgSaved -->
 <form method="post" class="feedback" id="feedback-form" data-role="feedback-form" data-bind="submit: submitFeedback">
 <fieldset class="fieldset">
 <legend class="legend"><span><p data-bind="i18n: 'You can post your feedback here.'"></p></span></legend><br>
 <div class="field name required">
 <label for="name" class="label"><span>Name</span></label>
 <div class="control">
 <input type="text" data-validate="required:true" 
 class="input-text" title="Name" 
 id="user_name" aria-required="true" 
 data-bind="value:uname,attr: 'data-validate': JSON.stringify(required:true),
 ">
 </div>
 </div>
 <div class="field email required">
 <label for="email" class="label"><span>Email</span></label>
 <div class="control">
 <input type="email" data-validate="required:true" data-bind="value:email,attr: 'data-validate': JSON.stringify(required:true,'validate-email':true),
 " class="input-text" title="Email" id="email" aria-required="true" >
 </div>
 </div>
 <div class="field telephone">
 <label for="telephone" class="label"><span>Phone Number</span></label>
 <div class="control">
 <input type="text" class="input-text" value="" title="Phone Number" id="telephone" data-bind="value:phone">
 </div>
 </div>
 <div class="field comment required">
 <label for="comment" class="label"><span>Feedback message</span></label>
 <div class="control">
 <textarea data-validate="required:true" rows="3" cols="5" class="input-text" title="What’s on your mind?" id="comment" name="comment" aria-required="true"
 data-bind="value:msg"></textarea>
 </div>
 </div>
 </fieldset>
 <div class="actions-toolbar">
 <div class="primary">
 <input type="hidden" value="" id="hideit" name="hideit">
 <input type="submit" class="action primary" data-bind="value: $t('Submit Feedback')" />
 <button data-bind="attr: title: $t('totalfeeds'), click: totalfeeds" class="action primary">Total Feeds</button>
 <button data-bind="click: totalfeeds">click me</button>
 <li><input type='radio' name='emi_type' data-bind='event: change: totalfeeds' id='emi' value="">
 <label class='label' for='emi'>Test</label>
 </li>
 </div>
 </div>
 </form>
 <table>
 <thead>
 <tr>
 <th>Id</th>
 <th>Name</th>
 <th>Email</th> 
 <th>Action</th> 
 </tr>
 </thead>
 <tbody data-bind="foreach: productList">
 <tr>
 <td data-bind="text: fid"></td>
 <td data-bind="text: name"></td>
 <td data-bind="text: email"></td>
 <td><a href="#" data-bind="click: function(data,event)$parent.deleteFeeds($parent,data);">Remove</a></td>
 </tr>
 </tbody>
 </table>


 <!-- /ko -->

 <!-- ko if: msgSaved -->
 <p data-bind="i18n: 'Feedback message posted for review.'"></p>
 <!-- /ko -->
</div>

Please check above radio element with change event with Test Label.