選択ドロップダウンリストを使用してjavascript関数を呼び出す

Question

エンドユーザーが追加ボタンをクリックして必要なだけの素材を入力できる動的フォームを使用している場合、このボタンはドロップダウンリストを挿入するJavaScript関数を呼び出します私のフォームに。選択したセクションを削除しても機能し、入力フィールドが呼び出されますが、選択セクションを追加するとその関数は呼び出されません。

<script type="text/javascript" src="jQuery.js"></script> 
 
<script type="text/javascript"> 
 
function add_row() 
 
{ 
 
$rowno=$("#recipe_details tr").length; 
 
$rowno=$rowno+1; 
 
$("#recipe_details tr:last").after("<tr id='row"+$rowno+"'> <td><select name="Material1[]"> 
 
<?php 
 

 
$sql2 = mysqli_query($conn, "SELECT * FROM Material"); 
 

 
while ($r = $sql2->fetch_assoc()){ 
 

 
?> 
 
<option value= <?php echo $r["Material_ID"] ?>><?php echo $r["Material"]; ?></option> 
 

 
<?php 
 
// close while loop 
 
} 
 
?></select></td><td><input type='text' name='quantity[]' placeholder='Enter Quantity'></td><td><input type='button' value='DELETE' onclick=delete_row('row"+$rowno+"')></td></tr>"); 
 
} 
 
function delete_row(rowno) 
 
{ 
 
$('#'+rowno).remove(); 
 
} 
 
</script> 
 

 

 

 

 
<div id="wrapper"> 
 

 
<div id="form_div"> 
 
<form method="post" action=""> 
 
    <table id="recipe_details" align=center> 
 
    <tr id="row1"> 
 
    <td><select name="Material1[]"> 
 
<?php 
 

 
$sql2 = mysqli_query($conn, "SELECT * FROM Material"); 
 

 
while ($r = $sql2->fetch_assoc()){ 
 

 
?> 
 
<option value= <?php echo $r["Material_ID"] ?>><?php echo $r["Material"]; ?></option> 
 

 
<?php 
 
// close while loop 
 
} 
 
?></select></td> 
 
    <td><input type="text" name="quantity[]" placeholder="Enter Quantity"></td> 
 
    </tr> 
 
    </table> 
 
    <input type="button" onclick="add_row();" value="ADD ROW"> 
 
    <input type="submit" name="submit_row" value="SUBMIT"> 
 
</form> 
 
</div> 
 

 
</div>

Answer 1

更新コード： -

<script type="text/javascript" src="jQuery.js"></script> 
<script type="text/javascript"> 
function add_row() 
{ 
    $rowno = $("#recipe_details tr").length; 
    $rowno = $rowno+1; 

    $("#recipe_details tr:last").after(
     `<tr id='row` + $rowno + `'><td><select name='Material1[]'> 
     <?php 

    $sql2 = mysqli_query($conn, "SELECT * FROM Material"); 

    while ($r = $sql2->fetch_assoc()){ 

    ?> 
    <option value = <?php echo $r["Material_ID"] ?>><?php echo $r["Material"]; ?></option> 

    <?php 
    // close while loop 
    } 
    ?> 
     <option value = 'Option 1'>Option 1</option> 
     </select ></td > 
     <td><input type='text' name='quantity[]' placeholder='Enter Quantity'></td> 
     <td><input type='button' value='DELETE' onclick=delete_row('row`+ $rowno + `')></td></tr>"`); 
} 
function delete_row(rowno) 
{ 
    $('#'+rowno).remove(); 
} 
</script> 




<div id="wrapper"> 

<div id="form_div"> 
<form method="post" action=""> 
    <table id="recipe_details" align="center"> 
    <tr id="row1"> 
    <td><select name="Material1[]"> 
<?php 
$sql2 = mysqli_query($conn, "SELECT * FROM Material"); 
while ($r = $sql2->fetch_assoc()){ 

?> 
<option value ='<?php echo $r["Material_ID"] ?>><?php echo $r["Material"];?>'></option> 

<?php 
// close while loop 
} 
?></select></td> 
    <td><input type="text" name="quantity[]" placeholder="Enter Quantity"></td> 
    </tr> 
    </table> 
    <input type="button" onclick="add_row();" value="ADD ROW"> 
    <input type="submit" name="submit_row" value="SUBMIT"> 
</form> 
</div> 

</div> 

私は、従業員のリストについては、私のマシン上でこのスニペットをチェックしています。そのうまく動作します。 まだ問題がある場合は教えてください。 あなたのマシンでも動作するはずです。