JavaScript函数与PHP代码无法正常工作

Question

I have a form with JavaScript and PHP validation. One of the form's features is a JavaScript function that copies a DIV and adds it to the page. The copy function works without any problems and the PHP and Javascript validation work for the initial DIV.

The problem: The PHP validation doesn't work for the newly created DIV's.

In other words, I have a DIV that is copied with a JavaScript function and has some PHP code. The problem is with the PHP code that only works for the initial DIV and not the new created DIV's.

This is the HTML code that is copied:

<div id="addinput">

<p> lorem 
   <input onBlur="data(this)" type="text"  id="valA" name="valA" 
    value="<?php   echo  ($valA);?>"/> 
   <span><?php echo $valAErr;?></span> 

    <select id="valD" name="valD" size="1">
       <option selected disabled hidden value=''></option>
       <option value="valueA">A</option>
       <option value="valueB">B</option> 
    </select>
    <span class="error"><?php echo $valDErr;?></span> 

    <a href="#" id="addNew">Add</a>
</p>
</div>

This is the initial JavaScript function that copies the DIV. This was made before I added the PHP code in the Javascript function and the HTML code, and it worked.

$(function() {
var addDiv = $('#addinput');
var i = $('#addinput p').size() + 1;
$('#addNew').live('click', function() {
$('<p> lorem 
       <input onBlur="data(this)" type="text" id="valA" name="valA' + i +'" 
        value=""/>


        <select id="valD" name="valD' + i +'" name="tip" size="1">
           <option selected disabled hidden value=''></option>
           <option>A</option>
           <option>B</option>
        </select>

        <a href="#" id="remNew">Delete</a> 
</p>').appendTo(addDiv);

i++;

return false;
});

$('#remNew').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});

This is my JavaScript code with PHP and it doesn't work:

$('#addNew').live('click', function() {
$('<p>lorem

      <input onBlur="data(this)" type="text" id="valA" name="valA' + i +'" 
       value="<?php echo ($valA);?>"/>
      <span class="eroareData, error"> <?php echo $valAErr;?> </span> 

      <select id="valD" name="valD' + i +'" name="tip" size="1">
            <option selected disabled hidden value=''></option>
            <option value="A">A</option>
            <option value="B">B</option>
      </select> 
      <span class="error"><?php echo $valCErr;?></span>
     <a href="#" id="remNew">Delete</a> </p>').appendTo(addDiv);

Answer 1

$('#addNew').on('click', function() { // live() is dead =)
    $('<p>De la <input onBlur="data(this)" type="text" id="valA" name="valA' + i +'" value="' + <?php echo $valA; ?> + '"/><span class="eroareData, error">' + <?php echo $valAErr; ?> + '</span> pana la <input onBlur="data2(this)" type="text" id="valB" name="valb' + i +'" value="' + <?php echo $valB; ?> + '"/><span class="eroareData2' + i +', error">' + <?php echo $valBErr; ?> + '</span> la pretul de <input onBlur="numar2(this)" type="text" id="valC" name="valC' + i +'" value="' + <?php echo $valC; ?> + '" /> <span class="eroareNumere2' + i +', error">' + <?php echo $valCErr; ?> + '</span> LEI pe <select id="valD" name="valD' + i +'" name="tip" size="1"><option selected disabled hidden value=''></option><option value="zi">zi</option><option value="samptamana">samptamana</option><option value="luna">luna</option></select> <a href="#" id="remNew">Sterge</a> </p>').appendTo(addDiv);
});

PHP will be executed before your JavaScript so you don't need to escape the double quotes... I just added some JavaScript concat for code readibility... Hopes this help