jquery update dynamisch hinzugefügt dropdown

Question

Ich habe eine jquery Funktion, die einige Eingabefelder bei Auswahl einer Dropdown-Option aktualisiert. Ich füge dynamisch auch so viele Auswahlen hinzu, wie ich will, indem ich eine addRow Funktion mit der gleichen Identifikation wie die erste Auswahl verwende. Die jquery-Funktion wird jedoch nicht für die neuen Auswahl ausgelöst. Unten ist mein jquery die Eingabefelder für die Aktualisierung:

$('#menusName').on("change",function() 
{ 
var menId = $(this).val(); 

$.ajax 
({ 
    url: "<?php echo base_url(); ?>" + "index.php/MainController/menuDetails", 
    async: false, 
    type: "POST", 
    data: "name="+menId, 
    dataType: "json", 

    success:(function(data) 
    { 
    $('#makes').val(data[0]); 
    $('#type').val(data[1]); 
    }) 
})}); 

Und auch die addRow Funktion:

function addRow(tableID) 
{ 
     var table=document.getElementById(tableID); 
     var rowCount=table.rows.length; 
     var row=table.insertRow(rowCount); 
     var colCount=table.rows[0].cells.length; 

     for(var i = 0; i < colCount; i++) 
     { 
      var newcell = row.insertCell(i); 
      var oldId = table.rows[0].cells[i].childNodes[1].text; 
      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 

      switch(newcell.childNodes[i]) 
      { 
       case"#text": 
        newcell.childNodes[i].value=""; 
        break; 
       case"#checkbox": 
        newcell.childNodes[i].checked=false; 
        break; 
       case"#select-one": 
        newcell.childNodes[i].selectedIndex=0; 
        break; 
      } 


     } 
    } 

Und unter meinem HTML-Code:

<table id="recipes" class="table"> 
     <a href="#" onclick="addRow('recipes');" class="btn btn-default"> 
      <span class="glyphicon glyphicon-plus"></span> Add Another Recipe 
     </a> 
     <a href="#" onclick="deleteRow('recipes');" class="btn btn-danger"> 
      <span class="glyphicon glyphicon-trash"></span> 
     </a> 
     <tr> 
      <td> 
       <select name="menusName" id="menusName" required> 
        <option>Choose a Menu</option> 
        <?php if($menus != null){ 
         foreach($menus as $r){ ?> 
         <option><?php echo $r->menuName;?></option> 
        <?php }}?> 
       </select> 
      </td> 
      <td>Makes: <input readonly name="makes" id="makes" type="text" required/></td> 
      <td>Cake Type: <input readonly name="type" id="type" type="text" required/></td> 
      <td>Multiply Recipe by: <input name="mulRecipe" id="mulRecipe" type="text" required/></td> 
     </tr> 
    </table> 

Answer 1

Versuchen Sie, die $(document).ready() Funktion:

$(document).ready(function() { 
    /* your code */ 
});