Динамически добавлять счетчик увеличения / уменьшения - PullRequest
Новая
       5

Динамически добавлять счетчик увеличения / уменьшения

1 голос
/ 27 мая 2020

Я пытаюсь реализовать динамический c счетчик увеличения / уменьшения. Вот как это должно работать:

У меня есть кнопка «ДОБАВИТЬ». Когда я нажимаю на нее, то же самое должно исчезнуть, и должна появиться кнопка «минус», ввод числа, кнопка «плюс». Нажатие на «+» должно увеличивать счетчик на «тележке», а нажатие на «-» должно уменьшаться.

Ниже html mycode 

<body>

    <div id="page-wrap">

        <h1>Cart Inc Dec</h1>
        <a href="#" class="btn btn-info btn-lg mt-5 mr-5 mb-5">
            <span class="glyphicon glyphicon-shopping-cart"><span id="itemCount"></span></span> Check Out
        </a>
        <br>
        <a id="btnAddItem" class="btn btn-primary float-right mt-5 mb-5 mr-5">ADD</a>   
        <div class="addItem">
        </div>

    </div>

</body>

Jquery: 

<script>
var addElement = 0;
 $(document).ready(function(){
 $("#btnAddItem").on("click", function (event) {
    if(addElement==0){
        $(".addItem").append(('<button type="button" class="counter decrease">-</button><input type="text" size="5" id="txtCounter" /><button type="button" class="counter increase">+</button>'));
        }
        addElement++;
    });
    var $input = $("#txtCounter");
// Initialise the value to 0
$input.val(0);
debugger;
// Increment/decrement count
$(".counter").click(function(){
    console.log('here i am');

    if ($(this).hasClass('increase'))
        $input.val(parseInt($input.val())+1);
    else if ($input.val()>=1)
        $input.val(parseInt($input.val())-1);
});

});
</script>

Теперь проблема в том, что после добавления динамика c +, счетчика ввода текста, элементов управления - ничего не происходит, когда я нажимаю + или минус. console.log внутри $(".counter").click(function() ничего не дает.

Я что-то упустил ??

Ответы [ 2 ]

0 голосов
/ 27 мая 2020

Вы можете изменить сценарий и попробовать что-то вроде ниже: 

var addElement = 0;
var myCounter= function(action){
    var val = document.getElementById("txtCounter").value;
  val = parseInt(val);
    if(action == 2){ //Increase
        document.getElementById("txtCounter").value=val+1;
    }else if(val > 1){

    document.getElementById("txtCounter").value=val-1;
  }
};
 $(document).ready(function(){
 $("#btnAddItem").on("click", function (event) {
    if(addElement==0){
        $(".addItem").append(('<button type="button" onclick="myCounter(1);" class="counter decrease">-</button><input type="text" size="5" id="txtCounter" value="0" /><button type="button" onclick="myCounter(2);" class="counter increase">+</button>'));
        }
        addElement++;
    });

});
0 голосов
/ 27 мая 2020

Вы можете сделать это следующим образом: Отрегулируйте $(".counter").click(function() {}); до $(document).on("click", ".counter", function(){});, поскольку элемент со счетчиком классов отсутствует при начальной загрузке страницы, и поэтому событие click() должно быть делегировано из стат c родительский элемент к добавленному элементу счетчика, используя on(). Затем переместите объявление переменной var $input = $("#txtCounter"); внутри этой функции щелчка, так как элемента с идентификатором txtCounter нет, когда страница загружается изначально, и переместите инициализацию $("#txtCounter").val(0); после ее добавления. 

var addElement = 0;
$(document).ready(function() {
  $("#btnAddItem").on("click", function(event) {
    if (addElement == 0) {
      $(".addItem").append(('<button type="button" class="counter decrease">-</button><input type="text" size="5" id="txtCounter" /><button type="button" class="counter increase">+</button>'));
      // Initialise the value to 0
      $("#txtCounter").val(0);
    }
    addElement++;
  });

  // Increment/decrement count
  $(document).on("click", ".counter", function() {
    var $input = $("#txtCounter");
    if ($(this).hasClass('increase')) {
      $input.val(parseInt($input.val()) + 1);
    } else if ($input.val() >= 1) {
      $input.val(parseInt($input.val()) - 1);
    }
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div id="page-wrap">
        <h1>Cart Inc Dec</h1>
        <a href="#" class="btn btn-info btn-lg mt-5 mr-5 mb-5">
            <span class="glyphicon glyphicon-shopping-cart"><span id="itemCount"></span></span> Check Out
        </a>
        <br>
        <a id="btnAddItem" class="btn btn-primary float-right mt-5 mb-5 mr-5">ADD</a>   
        <div class="addItem">
        </div>
    </div>
...