動的テキスト値を編集するjQuery

Question

動的にテキストボックスを追加して+をクリックするか、テキストボックスの値で1つの値は増加せず、追加されるテキストの数が増えます。

HTML

<table class="table table-striped"> 
    <thead> 
    <tr> 
     <th class="qColonna">Quantità</th> 
     <th>Categoria</th> 
     <th>Variazione</th> 
    </tr> 
    </thead> 
    <tbody id="tblVariazioniPranzo"> 
    <tr> 
     <td> 
     <div class="quantity-widget"> 
      <div class="btn btn-default less">-</div> 
      <input type="text" value="0" name="qVariazionePranzo[]" class="max30"> 
      <div class="btn btn-default more">+</div> 
     </div> 
     </td> 
     <td> 
     <select placeholder="Categoria" name="nCategoriaVariazionePranzo[]" id="categoriaPranzo"> 
      <option value="0">Categoria</option> 
      <option value="1">Antipasti</option> 
      <option value="2">Primi</option> 
      <option value="3">Secondi</option> 
      <option value="4">Contorni</option> 
      <option value="5">Dessert</option> 
     </select> 
     </td> 
     <td> 
     <input type="text" name="dVariazionePranzo[]" placeholder="Variazione" class="largoTOT"> 
     </td> 
    </tr> 
    </tbody>          
    <tbody> 
    <tr> 
     <td colspan="3"> 
     <button type="button" class="btn btn-success" onclick="addRow('tblVariazioniPranzo')" name="aggiungiPranzo" value="+">+</button> 
     </td> 
    </tr> 
    </tbody> 
</table> 

ジャバスクリプト（動的に行を追加する）

function addRow(tableID) { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 
    if(rowCount < 20){       // limit the user from creating fields more than your limits 
     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; 
     } 
    }else{ 
     alert("Maximum Passenger per ticket is 20"); 

    } 
} 

jQueryの（各テキストボックスの量を増加させる）

var currval; 
$(".quantity-widget .less").click(function(){ 
    currval = parseInt($(this).parent().find("input").val()); 
    if (currval > 0){ 
    $(this).parent().find("input").val((currval-1)); 
    } 
}); 
$(".quantity-widget .more").click(function(){ 
    currval = parseInt($(this).parent().find("input").val());  
    $(this).parent().find("input").val((currval+1)); 
}); 

どのようにして常に数量を追加できますか？

Answer 1

あなたが動的にページに追加された要素に対処するためのイベント委任on()を使用する必要があります。

$("body").on('click','.less',function(){ 
//AND 
$("body").on('click','.more',function(){ 

も準備ができて関数内で、あなたのイベントを置く：

$(function(){ 
    //Your events here 
}) 

・ホープ、このことができます。

$(function(){ 
 
    var currval; 
 

 
    $("body").on('click','.less',function(){ 
 
    currval = parseInt($(this).parent().find("input").val()); 
 
    if (currval > 0){ 
 
     $(this).parent().find("input").val((currval-1)); 
 
    } 
 
    }); 
 

 
    $("body").on('click','.more',function(){ 
 
    currval = parseInt($(this).parent().find("input").val());  
 

 
    $(this).parent().find("input").val((currval+1)); 
 
    }); 
 
}) 
 

 
function addRow(tableID) { 
 
    var table = document.getElementById(tableID); 
 
    var rowCount = table.rows.length; 
 
    if(rowCount < 20){       // limit the user from creating fields more than your limits 
 
    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; 
 
    } 
 
    }else{ 
 
    alert("Maximum Passenger per ticket is 20"); 
 

 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-striped"> 
 
    <thead> 
 
    <tr> 
 
     <th class="qColonna">Quantità</th> 
 
     <th>Categoria</th> 
 
     <th>Variazione</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody id="tblVariazioniPranzo"> 
 
    <tr> 
 
     <td> 
 
     <div class="quantity-widget"> 
 
      <div class="btn btn-default less">-</div> 
 
      <input type="text" value="0" name="qVariazionePranzo[]" class="max30"> 
 
      <div class="btn btn-default more">+</div> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <select placeholder="Categoria" name="nCategoriaVariazionePranzo[]" id="categoriaPranzo"> 
 
      <option value="0">Categoria</option> 
 
      <option value="1">Antipasti</option> 
 
      <option value="2">Primi</option> 
 
      <option value="3">Secondi</option> 
 
      <option value="4">Contorni</option> 
 
      <option value="5">Dessert</option> 
 
     </select> 
 
     </td> 
 
     <td> 
 
     <input type="text" name="dVariazionePranzo[]" placeholder="Variazione" class="largoTOT"> 
 
     </td> 
 
    </tr> 
 
    </tbody>          
 
    <tbody> 
 
    <tr> 
 
     <td colspan="3"> 
 
     <button type="button" class="btn btn-success" onclick="addRow('tblVariazioniPranzo')" name="aggiungiPranzo" value="+">+</button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>