当jquery动态添加元素时，外部java脚本“mtree脚本”不起作用

Here I attach the images where you can see the list of data which show after page load but in all rows but when i add the row using jquery it is not show the data. please check image 2

image first

image 2

This is the link of mtree demo and this is the codepen link

and below is the code that i use to generate row and display mtree.

$(document).ready(function() {
    var ite = <?php echo $projectCount; ?>;
    $('.btn-row-add').click(function() {
        var leaveDays = checkLeaveDays();
        console.log(leaveDays);
        var ite2 = 1
        style = '';
        readOnly = '';
        if(jQuery.inArray(ite2, leaveDays) !== -1){
            style = "style = 'background:#00FF00;'";
            readOnly = "readonly='readonly'";
        }
        var el2 = '<td><input '+style+' '+readOnly+' id="text_'+ite2+'" class="short-textbox" type="text" name="day_'+ite+'[]" value="" onkeyup="sumNewRows(), colsValues(), colsVertical()"></td>';
        for(var i=2; i<<?php echo $noOfDays+1; ?>; i++) {
            styleInner = '';
            readOnlyInner = '';
            if(jQuery.inArray(i, leaveDays) !== -1){
                styleInner = "style = 'background:#00FF00;'";
                readOnlyInner = "readonly='readonly'";
            }
            el2 = el2 + '<td><input '+styleInner+' '+readOnlyInner+' id="text_'+i+'" class="short-textbox" type="text" name="day_'+ite+'[]" value="" onkeyup="sumNewRows(), colsValues(), colsVertical()"></td>';

        }
        console.log($('whc-table tbody').html());
        var el = '<tr id="data_'+ite+'">
' +
            '<th scope="row">
' +
            '<select class="dropdownlist" data-text-field="name" name="project_name[]"  style="width: 300px;">
' +
            '<option value=""></option>
' +
            '</select>
' +
            '
' +
            '</th>
' +
            '<td id="mm-transit">
' +
            '
' +
            '<div class="fake-input">
' +
            '<input value="" name="task_no[]" class="task_list" id="task_list_" type="text" title="Show category list here leter"><img class="show_task" id="show_task" src="<?=base_url()?>images/down.png">
' +
            '\t<div id="cat-list-" class="cat-list"><?php echo $categories_list ?></div>
' +
            '</div>
' +
            '</td>
' +
            el2 +
            '
' +
            '<td style="text-align: center;">
' +
            '<input style="width: 35px;" id="text_total_'+ite+'" readonly=\'readonly\' class="short-textbox" type="text" name="total_'+ite+'" value="">
' +
            '</td>
' +
            '</tr>';
        ite++;
        $(el).appendTo($('#whc-table tbody'));
        projectDropdown();
        taskDropdown();
        initializeMtree();
    });
});

Note - same way i used to show mtree in normal rows means rows those are not generated by javascript that is

Try using

$('.btn-row-add').on('click', function() {

instead of

$('.btn-row-add').click(function() {