Hello there again,
I am using Syncfusion's Grid for MVC and inline form editing. Here, I have a dropdownlist named 'Business Address' as one of my elements in
inline form editing. 
I have filled the dropdownlist value using jsrender for loop like this:
<select id="listOfAddresses" name="listAddress" class="form-control-row">
{{for listAddress }}
<option value="{{:Address}}" data-state="{{:State}}" data-city="{{:City}}">{{:Address}}</option>
{{/for}}
</select>
My requirement is, on 'Change' event of the dropdown, I need to update values of 'City' and 'State' elements which are next to the dropdownlist. Tried quite a few things for this. But the 'change' event never gets called!
$('#listOfAddresses').change(function () {
alert('change');
});
----------------------------------------------------
$('#listOfAddresses').on('change', function () {
alert('change');
});
----------------------------------------------------
$("select#listOfAddresses.form-control-row.valid").on('change', function () {
alert('change');
});
----------------------------------------------------
$(document).on('change', '#listOfAddresses', function () {
alert('change');
});
----------------------------------------------------
$(document.body).on('change', '#listOfAddresses', function () {
alert('change');
});
----------------------------------------------------
Here, change/ on('change', function(){ })
EVENT NEVER GETS INVOKED until I manually copy the code and paste it in the firebug console. How would you write a jquery function for one of the elements in inline editing form? This should be easy but it's not working. Help needed.
