Jquery injected dom not available for process.

Question

I have iterated new DOM using jquery. But the newly manipulated DOM are not available as normal DOM. DOM is properly written to browser yet functions on those elements not working. Code is given below.

<div>
<table  id='jvcontainer'>
    <tr id='vrtable'>
        <td>
        <select class="drcr">
            <option value="dr">Dr</option>
            <option value="cr">Cr</option>
        </select>           
        <input class="jvamt" name="parrot[]" type="text"> 
        </td>
    </tr>       


</table>    

</div>  
<script>


    $(".drcr").change(function(){
        thisval = $(this).closest("tr").find(".jvamt").val();
        //alert(thisval);
        $('#jvcontainer').append("<br><tr id='vrtable'><td><select class='drcr'><option value='dr'>Dr</option><option value='cr'>Cr</option></select><input class='jvamt' name='parrot[]' type='text' value='fdfdfd'></td></tr> ");
    });
</script>

score 1 · Accepted Answer · answered Mar 22 '17 at 14:50

Apparently there was no error in code logic. But it never worked and based on a tip from @Professor Allman, I could change it like below and it worked like a charm.

$("#jvcontainer").on('change','.drcr',(function(){
        thisval = $(this).closest("tr").find(".jvamt").val();
        //alert(thisval);
        $('#jvcontainer').append("<br><tr id='vrtable'><td><select class='drcr'><option value='dr'>Dr</option><option value='cr'>Cr</option></select><input class='jvamt' name='parrot[]' type='text' value='fdfdfd'></td></tr> ");
    }));

Jquery injected dom not available for process.

1 Answers1