JQuery Clone Validation

Question

У меня проблемы с проверкой клонированных элементов. Извиняюсь за количество написанного кода, но я подумал, что могу поставить его с самого начала.

Это образец оригинального div:

<div id="addDriver1" class="clonedInput">
          <table width="100%" border="0" cellspacing="0" cellpadding="0" class="<?= $editDriver; ?>">


          <tr>
            <td height="25" align="left" valign="top"><label for="driverReq" >Do you want to make this change or are 
you looking for a quote only?</label></td>
            <td height="25" align="left" valign="top" colspan="2"><select name="driverReq" id="driverReq">
              <option selected="selected" value="">Please select</option>
              <option value="Make Change" <? if ($_SESSION['driverReq']=="Make Change") { echo "selected";} ?> >Make Change</option>
              <option value="Quote only" <? if ($_SESSION['driverReq']=="Quote only") { echo "selected";} ?>>Quote only</option>
            </select></td>
          </tr>
          <tr>
            <td height="5" colspan="3" ></td>
            </tr>
          <tr>
            <td height="25" align="left" valign="top"><label for="driverDate" ;?>>What date would you like this change 
to be effective from? </label></td>
            <td height="25" align="left" valign="top"><input name="driverDate"  type="text" id="driverDate"  style="width: 75px;" value="<?=$_SESSION['driverDate']; ?>" /></td>
            <td height="25" align="left" valign="top">(DD/MM/YYYY) </td>
          </tr>
                    <tr>
            <td height="5" colspan="3" ></td>
            </tr>
</table></div>

Это сценарий клонирования:

$('#btnAddDriver').live('click',function() {
                var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
                var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

                // create the new element via clone(), and manipulate it's ID using newNum value
                var newElem = $('#addDriver1').clone(true).attr('id', 'addDriver' + newNum);



                newElem.prepend("<div class='subhead1'>Add a driver "+newNum+"</div>");
                //newElem.find()

                // insert the new element after the last "duplicatable" input field
                $('#addDriver' + num).after(newElem);
                //add the new ID to the inputs
                newElem.find("*[id]").each(function() { 
                    $(this).attr("id", $(this).attr("id") + newNum); 
                    $(this).attr("name", $(this).attr("name") + newNum); 
                    $(this).attr("value", $(this).attr("<?= $_SESSION['"+$(this).attr("name") + newNum+"']; ?>") ); 
                }); 

                newElem.find("label").each(function() {  
                $(this).attr("for", $(this).attr("for")+ newNum); 
                });

Вывод клонированных элементов с новым идентификатором и именем, например. ,>> и т. д.

Я пытаюсь проверить это:

     validateDriverReq2 = function(){       
        if(driverReq2.val()==""){
            $(this).addClass("error");
            driverReq2Info.html("Please confirm what you would like us to do with your request.<br>");
            $("#driverReq2Info").addClass("errorTop");
            //labelAddPC.addClass("labelError");
            $("label[for='driverReq2']").addClass("labelError");
            checkErrors();
            topErrorDriver();
            return false;
        }
        else{
            driverReq2.removeClass("error");
            driverReq2Info.html("");
            driverReq2Info.removeClass("errorTop");
            $("label[for='driverReq2']").removeClass("labelError");
            checkErrors();
            topErrorDriver();
            return true;
        }
    }

    driverReq2.blur(validateDriverReq2);
    driverReq2.change(validateDriverReq2);  

    validateDriverReq = function(){     

        if(driverReq.val()==""){
            $(this).addClass("error");
            driverReqInfo.html("Please confirm what you would like us to do with your request.<br>");
            $("#driverReqInfo").addClass("errorTop");
            //labelAddPC.addClass("labelError");
            $("label[for='driverReq']").addClass("labelError");
            checkErrors();
            topErrorDriver();
            return false;
        }
        else{
            driverReq.removeClass("error");
            driverReqInfo.html("");
            driverReqInfo.removeClass("errorTop");
            $("label[for='driverReq']").removeClass("labelError");
            checkErrors();
            topErrorDriver();
            return true;
        }
    }

// }

 driverReq.blur(validateDriverReq);
driverReq.change(validateDriverReq);

используйте этот код в других областях формы, и он отлично работает. Однако эта проверка полностью запутана в клонированном разделе. Перемещение через клонированный driverReq2 приводит к тому, что метка для оригинального driverReq активируется и отображает ошибку, хотя она правильно обнаруживает ошибку для самого поля driverReq2. Затем, при выборе параметра в driverReq2, ошибка не удаляется при изменении или размытии.

Я безуспешно пытался связать переменные так, чтобы они указывали на само имя формы и ее родительский div (например, # addDriver2).

Я надеюсь, что кто-то здесь может помочь и посоветовать, что я делаю не так, прежде чем я пойду полностью гага

Спасибо

Answer 1

Вы усложняете это, и не многие люди читают весь код. вам следует знать следующее.

При клонировании вы просто создаете новый элемент с похожими функциями. если у вас есть идентификатор элемента, который необходимо клонировать, то при клонировании вы должны изменить идентификатор, а затем сообщить клонированным элементам, какие события необходимо выполнить, поскольку они не зарегистрированы, если вы не используете live() должен включать новый идентификатор в качестве селектора или использовать классы для выполнения одних и тех же инструкций для многих элементов.

надеюсь, это поможет. Кстати, вам может понадобиться использовать die() перед активацией, чтобы очистить любые события, связанные с элементом.