爲什麼追加只能工作一次？

我正在製作一個價目表，每次按下'下一個'按鈕時都會添加一行。我試圖在每行之後追加單獨的價格。然而，它只適用於前兩行，但最後打印行數（'totalCabs'）的效果很好。爲什麼追加只能工作一次？

這裏是JS：

$(document).ready(function() { 
var i = 2; 
var totalPrice = 0; 
var insert = $('<p class="nom">' + 
    '<select id="cab' + i + '">' + 
    '<option value="b1">B1</option>' + 
    '<option value="b2">B2</option>' + 
    '<option value="b3">B3</option>' + 
    '<option value="bnd">Base No Drawer</option>' + 
    '<option value="bt">Base Trey</option>' + 
    '<option value="d3">D3</option>' + 
    '<option value="d4">D4</option>' + 
    '<option value="sc">SC</option>' + 
    '</select>' + 
    '<input id="cab' + i + 'Size" type="text" />' + 
    '<div id="p' + i + '"></div>' + 
    '</p>'); 

$("body").on('click', 'button', (function() { 
    $("#poo").append(insert.clone()); 
    var cabP = '#p' + (i - 1); 
    printPrice(cabP); 
    i ++; 
    document.getElementById('totalCabs').innerHTML = i-1; 
})); 
function printPrice(place){ 
    var ap = " $111"; 
    $(place).append(ap); 
} 
});

和HTML：

<body> 
<div id="poo"> 
    <p class="nom"> 
     <select id="cab1"> 
      <option value="b1">B1</option> 
      <option value="b2">B2</option> 
      <option value="b3">B3</option> 
      <option value="bnd">Base No Drawer</option> 
      <option value="bt">Base Trey</option> 
      <option value="d3">D3</option> 
      <option value="d4">D4</option> 
      <option value="sc">SC</option> 
     </select> 
     <input id="cab1Size" type="text" /> 
     <div id="p1"></div> 
    </p> 
</div> 
<button id="btn1">Next</button> 
<div id="cabEnter"></div> 
<div id="cabPercentage"></div> 
<div id="totalCabs"></div> 
<div id="totalCabs2"></div> 
<div id="subtotalPrice"></div> 
<div id="totalPrice"></div>

來源

2013-02-26 punksux

初始小提琴：HTTP ：//jsfiddle.net/hcq7d/ – isherwood 2013-02-26 22:25:31

看到這個工作小提琴：http://jsfiddle.net/hcq7d/2/

的問題是，可變insert被創建當時i = 2。儘管事後更改了i的值，但此更改不會影響insert的值，因爲它已被創建。因此，而不是僅僅克隆insert jQuery對象，實際上是創建一個新的，傳入我的新價值：

function getInsert(i){ 
    return $('<p class="nom">' + 
      '<select id="cab' + i + '">' + 
      '<option value="b1">B1</option>' + 
      '<option value="b2">B2</option>' + 
      '<option value="b3">B3</option>' + 
      '<option value="bnd">Base No Drawer</option>' + 
      '<option value="bt">Base Trey</option>' + 
      '<option value="d3">D3</option>' + 
      '<option value="d4">D4</option>' + 
      '<option value="sc">SC</option>' + 
      '</select>' + 
      '<input id="cab' + i + 'Size" type="text" />' + 
      '<div id="p' + i + '"></div>' + 
      '</p>'); 
}

然後，在click處理程序中：

$("#poo").append(getInsert(i));

來源

2013-02-26 22:36:01 maxedison

這很有道理。謝謝。我是在假設再次調用'insert'時，它會使用遞增的'i'。 – punksux 2013-02-26 22:45:28

爲什麼追加只能工作一次？

回答

相關問題