jqtranform not applied to dynamically added fields

Question

I'm using the jqtransform for my form fields. When i added the dynamic field to the form, the jqtransform is not applied to new field. Please see the samplecode,

$(function(){

$('form#js_greatdeals_form').jqTransform();


$('#js_greatdeals_form div.jqTransformSelectWrapper ul li a').click(function(){
var value = $(this).parent().index();
      $("#select_cntry").attr('selectedIndex', value);
      var countryiso = $("#select_cntry").val();

        if(countryiso == 1) {
        var content = '<select name="state" id="state"><option value="s1">State1</option><option value="s2">State2</option></select>';
        $('#newselect').html(content);
        $('select#state').jqTransform(); //Newly added
        }
    }); 
});

My form is,

<form id="js_greatdeals_form" name="js_greatdeals_form" method="post">
  <select id="select_cntry">
    <option selected="selected">select</option>
    <option value="1">Country1</option>
    <option value="2">Country2</option>
  </select>
  <div id="newselect"></div>
</form>

I tried the answer given for the question [Please see the comment line "Newly added"]. But that solution also not work for me. Please do the needful. Thanks

Answer 1

open your jquery.jqtransform.js file and find the following line:

/* Fire the onchange event */
if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) {
    $select[0].selectedIndex = $(this).attr('index');
    $select[0].onchange();
 }

now simply add the following below that line:

/* Fire the change event */
 if ($select[0].selectedIndex != $(this).attr('index')) {
     $select[0].selectedIndex = $(this).attr('index');
    $($select[0]).trigger('change');
 }