Jquery form validation after dynamic select elements loaded

Question

I am using a jquery plugin called Validval for validating forms. For the most part I am using it successfully. However I am having issues with dynamic content. Instead of posting the whole form I will post the part of the form and ajax concerned.

I have a select box which "onChange" calls a PHP script which returns more select boxes depending on the choice. It is the returned elements that are giving me a problem.

Select Box (present on page load and validation works)

<label>Number to add :</label>
            <select required name="name" id="name" size="1" >
                <option value="">Select</option>
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>

        </select>
            <P id="delayresults"></P>

The results from the onChange event appear in the above delayresults.

The PHP script is below and to avoid posting lots of code I will put post only the if = 1 script.

 elseif ($name =='1') {


    echo ''  

        ." <label> Delay Cause : </label><select required id = 'delayonemaster'  name = 'delayonemaster'>"
        . '<option value="">Please Select</option>'
         . "  <option value = 'sterile ops'>Sterile ops</option>"
          . " <option value='engineering'>Breakdown Engineering</option>"
        ."</select><br>"
  ." <label> Hours Lost :</label><select required id='delay1hours' name='delay1hours'>"
        . '<option value="">Please Select</option>'
   ."       <option value='1'>1</option>"
    ."      <option value='2'>2</option>"
  ."<option value='3'>3</option>"
  ."<option value='4' >4</option>"
  ."<option value='5'>5</option>  </select><br>"
            . "<input id='vname' type='hidden' value='1'>"
   .            '<p id = "masterresone"></p> ';

}elseif

The above is just a snippet of what is returned from the AJAX call and this all works I just cant validate it when it is returned to my page.

I am using the very basic methods of Validval only at present calling the "required" attribute. The JQUERY is as follows.

<script>
       $(document).ready(function() {
       $( "#handform" ).validVal();

     });



       </script>

The above is to activate the very basic methods of validval.

To add dynamic content I think I have to use the addfield event but my code is not working and I am unsure if I am adding it on it own or within the above jquery. My code for adding the field is below:

<script>

     $(document).ready(function() {  

  var row = $("#delayonemaster");

$("#handform").trigger( "addField",  row.find( "select" ) );
     });
</script>

Any help with getting this to work is much appreciated for those not familiar with the plugin here is a link.

http://validval.frebsite.nl/events.php

UPDATE

I can get both dynamic validation and page load validation to work but not together :

Dynamic on it own:

 <script>
       $(document).ready(function() {

        var row = $("#delayonemaster").val();
$row.appendTo( $("#handform") );
$("#handform").trigger( "addField",  row.find( "select" ) );
       });

       </script>

Page Load on it own:

<script>

     $(document).ready(function() {
       $( "#handform" ).validVal();
   });
        </script>

both working!

Together it fails:

<script>
       $(document).ready(function() {
        $( "#handform" ).validVal();
        var row = $("#delayonemaster").val();
$row.appendTo( $("#handform") );
$("#handform").trigger( "addField",  row.find( "select" ) );
       });




       </script>