아약스 게시물 작동하지 않는 PHP는 MySQL

Question

나는 자바 스크립트를 사용하여 행을 추가 할 수있는 테이블이 있습니다. 각 행에 선택 상자가 있습니다. 내가 선택 상자에 onchange 전화입니다. 첫 번째 행에서만 작동하며 자바 스크립트를 통해 추가 된 행에서는 작동하지 않습니다. 도와주세요.

이 추가로 HTML 테이블과 행 삭제 버튼 :이 아약스는

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); 

      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
      //alert(newcell.childNodes); 
      switch(newcell.childNodes[0].type) { 
       case "text": 
         newcell.childNodes[0].value = ""; 
         break; 
       case "checkbox": 
         newcell.childNodes[0].checked = false; 
         break; 
       case "select-one": 
         newcell.childNodes[0].selectedIndex = 0; 
         break; 
      } 
     } 
    } 

    function deleteRow(tableID) { 
     try { 
     var table = document.getElementById(tableID); 
     var rowCount = table.rows.length; 

     for(var i=0; i<rowCount; i++) { 
      var row = table.rows[i]; 
      var chkbox = row.cells[0].childNodes[0]; 
      if(null != chkbox && true == chkbox.checked) { 
       if(rowCount <= 1) { 
        alert("Cannot delete all the rows."); 
        break; 
       } 
       table.deleteRow(i); 
       rowCount--; 
       i--; 
      } 


     } 
     }catch(e) { 
      alert(e); 
     } 
    } 

    $(document).ready(function() { 

    $('.product').change(function() {  
var id = $(this).val(); 

$.ajax({ 
    type: "POST", 
    url: "ajax.php", 
    data: { 
     id : id 
    }, 
    success: function(data) { 
    if(data){ 

    $("#amount").val(data); 
    $("#quantity").val("1"); 
    } 
    }, 
    error : function(data){ 
    alert("Error occured !!"); 
    } 
});  
}); 

    }); 

입니다 :

<INPUT type="button" class="btn btn-primary" value="Add Row" onclick="addRow('payment_table')" /> 
<INPUT class="btn btn-primary" type="button" value="Delete Row" onclick="deleteRow('payment_table')" /> 

<TABLE class="table table-hover dataTable table-striped width-full" data-plugin="dataTable" id="payment_table"> 
    <TR> 
     <TD><INPUT type="checkbox" name="chk"/></TD> 
     <TD> 
      <SELECT name="product" class="form-control product" id="product" > 
       <option value="">Select Product</option> 
       <?php 
       $sql="select products_name,products_amount,products_tmp_id from slv_products where products_status <> '0'"; 
       $results = $connect->runQuery($sql); 
       foreach($results as $result) { 
       ?> 
       <option value="<?php echo $result['products_tmp_id']; ?>"><?php echo $result['products_name']; ?></option> 
       <?php } ?> 
      </SELECT> 
     </TD> 
     <TD><input class="form-control col-sm-2" type="text" name="quantity" id="quantity" placeholder="Quantity"></TD> 
     <TD><input class="form-control" type="text" name="amount" id="amount" placeholder="Amount" readonly></TD> 
    </TR> 

</TABLE> 

이 추가하고 행과 아약스를 삭제하는 스크립트입니다. ph :

<?php 
include('/opt/lampp/htdocs/slv/includes/config.php'); 
$id = $_POST['id']; 
$query = "SELECT products_amount FROM slv_products WHERE products_tmp_id='$id'"; //expecting one row 
$results = $connect->runQuery($query); 
foreach($results as $result){ 
    echo $result['products_amount']; 
} 
?> 

Answer 1

아약스 코드는 다음과 같아야합니다.

$('body').on('change', '.product', function() { 
     var _that = $(this); 
     var id = _that.val(); 

     $.ajax({ 
     type: "POST", 
     url: "ajax.php", 
     data: { 
      id : id 
     }, 
     success: function(data) { 
      if(data){ 
      _that.parents("tr").find(".amount").val(data); 
      _that.parents("tr").find(".quantity").val("1"); 
      } 
     }, 
     error : function(data){ 
     alert("Error occured !!"); 
     } 
    });  
    }); 

html 요소의 바인딩 때문입니다. html이 동적으로 추가되면 jQuery와 직접 바인딩 할 수 없습니다.