Почему приложение только работает один раз?

Я делаю прейскурант, который добавляет строку каждый раз, когда нажимается кнопка «Далее». Я пытаюсь добавить индивидуальную цену после каждой строки. Однако он работает только для первых двух строк, но печать количества строк («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

Смотрите эту рабочую скрипку: http://jsfiddle.net/hcq7d/2/

Проблема заключается в том, что переменная insert будет создаваться когда i = 2. Хотя вы меняете значение i, это изменение не влияет на значение insert, так как оно уже создано. Так, а не просто клонировать объект insert JQuery, на самом деле создать новый, переходя в новое значение I:

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

Почему приложение только работает один раз?

ответ

Смежные вопросы