Отображать сообщения от плагина jQuery Validate внутри всплывающих подсказок Tooltipster, но проверять динамически созданные элементы управления

Я хочу использовать Jquery Validate в сочетании с Tooltipster аналогично примеру, предоставленному Sparky здесь.

Разница в том, что мне нужно показать эти сообщения об ошибках в элементах управления, которые я создаю динамически, и, как показано, это jsfiddle, это работает только для static html-элементов управления (поле ввода и текстовое поле, показанное перед набором полей «Сведения о возврате»)

HTML-код:

<form id="myform">
    <table align="center" style="width: 100%">
        <tr>
            <td>
                <input id="title" type="text" name="title" class="required tooltip" />
                <br>
                <textarea id="comments" name="comments" class="required tooltip"></textarea>
            </td>
        </tr>
        <tr>
            <td>
                <table align="center" style="width: 70%" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                            <fieldset>
                                <legend>Return Details</legend>
                                <input id="addRow" type="button" value="+ Add Frame " class="button small blue" style="height: 20px;" />
                                <table id="tbRetornosModelos" class="tabla-retorno" width="100%" border="0">
                                    <tbody></tbody>
                                </table>
                            </fieldset>
                        </td>
                    </tr>
                </table>
                <table id="tbStructures" align="center" style="width: 70%" cellpadding="0" cellspacing="0">
                    <tbody></tbody>
                    <tfoot>
                        <tr>
                            <td>
                                <input type="button" id="btnEnviar" value="Send" />
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </td>
        </tr>
    </table>
</form>

JS-КОД

$(document).ready(function () {
    var counter = 0; // Counter for number of rows
    var c_NombreRetorno = null;
    var c_TipoRetorno = null;

    $("#addRow").on('click', function () {
        counter = counter + 1;

        var newNombreRetorno = "NombreRetorno" + counter;
        var newTipoRetorno = "TipoRetorno" + counter;
        //Cambiar               
        var newEnlaceEstruct = "tbExp_s1_e" + counter;
        var newRow = '<tr><td style="font-weight:bold; width:100px;">Return # ' + counter + ':  </td>' +
            '<td>' + '  Name</td>' +
            '<td><input type="text" id="' + newNombreRetorno + '" name="' + newNombreRetorno + '" class="required tooltip"/>' + '</td>' +
            '<td>Data Type</td>' +
            '<td><select name="select" id="' + newTipoRetorno + '" class="required tooltip"> <option value="" selected>Seleccione...</option> <option value="Number" >Number</option><option value="Text">Text</option></select></td>' +
            '<td><input type="button" value="-Remove" class="button small blue deleteFila"  style="height:20px;"></td>' +
            '<td><input type="hidden" id="enlace' + counter + '" value="' + newEnlaceEstruct + '" /></td>' +
            '</tr>';
        $('table.tabla-retorno >tbody').append(newRow);



        var iEst = counter;
        $('#tbStructures >tbody').append('<tr id="r' + iEst + '"></tr>');
        $('#r' + iEst).append('<td><fieldset id="e' + iEst + '"><legend>Estructure(Frame) For Retorno # ' + iEst + '</legend></fieldset></td>')
        var idEst = 'e' + iEst;
        var idSent = 's1_' + idEst;
        $('#' + idEst).append('<div><span>Expression Type</span><select id="tipoExp_' + idEst + '"></select></div><hr><fieldset id="' + idSent + '"></fieldset>');
        var idDivEst = 'div_' + idSent;
        $('#' + idSent).append('<div><select id="subTipoExp_' + idSent + '"></select></div></div><br/><div id="' + idDivEst + '"></div>');
        var idTbSent = 'tbExp_' + idSent;
        $('#' + idDivEst).append('<table id ="' + idTbSent + '" class="order-list" align="center" cellpadding="0" cellspacing="0"></table>');
        $('#' + idTbSent).append('<tbody></tbody><tfoot></tfoot>');
        var fila_1 = '<tr><td><span class="rightAlig">IF</span>(<input type="text" id="exp1_' + idTbSent + '" name="exp1_' + idTbSent + '" class="conditionInput required tooltip" /></td>';
        fila_1 += '<td>:<input type="text" id="ret1_' + idTbSent + '" name="ret1_' + idTbSent + '" class="required tooltip" />)</td><td></td></tr>';
        $('#' + idTbSent + ' > tbody').append(fila_1);

        var filas_footer = '<tr><td colspan="3" style="text-align: left;"><input type="button" id="btnAñadir_' + idTbSent + '" value="+ Add" class="button small blue agregarCond" /></td></tr>';
        filas_footer += '<tr><td colspan="3"><span>Else</span>(<input type="text" id="else_' + idTbSent + '" name="else_' + idTbSent + '" class="required tooltip" />)<input type="hidden" id="c_' + idTbSent + '" value="1" /></td></tr>';
        $('#' + idTbSent + ' > tfoot').append(filas_footer);

        addEventNewRow('btnAñadir_' + idTbSent);
        $(".deleteFila").on("click", function (event) {
            $(this).closest("tr").remove();
        });
    });

    function addEventNewRow(elemId) {
        elem = $("#" + elemId);
        elem.on('click', function () {

            var tbId = $(this).closest("table").attr("id");
            var IDs = tbId.split("_");
            var estId = IDs[2];
            var c_tb = $('input[id="c_' + tbId + '"]');
            var c_condiciones = parseInt(c_tb.val());
            c_condiciones = c_condiciones + 1;
            var newCondition = "exp" + c_condiciones + "_" + tbId;
            var newTrueValue = "ret" + c_condiciones + "_" + tbId;
            var idBtnQuitar = "btnQuitar_" + c_condiciones + "_" + tbId;

            var newRow = '<tr><td><span>ELSE IF</span>(<input type="text" id="' + newCondition + '" name="' + newCondition + '" class="conditionInput required tooltip"/>) </td>';
            newRow += '<td>:<input type="text" id="' + newTrueValue + '" name="' + newTrueValue + '" class="required tooltip"/>)</td>';
            newRow += '<td><input type="button" id="' + idBtnQuitar + '" value="-Remove" class="button small blue"></td></tr>';
            $('#' + tbId + ' >tbody').append(newRow);

            //update counter "c_condiciones"
            c_tb.val(c_condiciones);

            $('#' + idBtnQuitar).addClass('deletRow');

            $(".deletRow").on("click", function (event) {

                $(this).closest("tr").remove();


            });
        });
    }
    //$('#myform input[type="text"]').tooltipster({
    $('.tooltip').tooltipster({
        trigger: 'custom', // default is 'hover' which is no good here
        onlyOne: false, // allow multiple tips to be open at a time
        position: 'right' // display the tips to the right of the element
    });
    var dialogFormValidator = $("#myform").validate({
        // any other options & rules,
        errorPlacement: function (error, element) {
            $(element).tooltipster('update', $(error).text());
            $(element).tooltipster('show');
        },
        success: function (label, element) {
            $(element).tooltipster('hide');
        },
        submitHandler: function (form) {
            form.submit();
        }
    });

    $("#btnEnviar").click(function () {
        var valid = dialogFormValidator.form();
        if (valid) {
            alert("valid!!")
        } else {
            alert("invalid!!!");
        }
    });


});

В этом jsfiddle я использую класс tooltip, чтобы прикрепить сообщение всплывающей подсказки ко всем тем элементам управления, которые я хочу проверить. Я также пытаюсь использовать селекторы типов, как Спарки в своем примере, но это тоже не сработало.

Кто-нибудь знает, как я могу заставить всплывающую подсказку работать с динамическим управлением или может показать мне, где я ошибаюсь?

Заранее спасибо.