动态添加递增/递减计数器答案

【问题标题】：Dynamically add increment/decrement counter动态添加递增/递减计数器
【发布时间】：2020-05-27 18:41:05
【问题描述】：

我正在尝试实现一个动态递增/递减计数器。以下是它的工作原理：

我有一个“添加”按钮。当我点击它时，同样应该消失并且应该出现一个减号按钮，数字输入，加号按钮。点击“+”应该增加“购物车”上的计数器，点击“-”应该减少。

下面是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>

现在的问题是在我添加动态+、文本输入计数器、- 控件后，当我单击+ 或减号时没有任何反应。 $(".counter").click(function() 内的 console.log 没有提供任何东西。

我错过了什么吗？？

【问题讨论】：

标签： javascript jquery counter

【解决方案1】：

您可以这样做：将$(".counter").click(function() {}); 调整为$(document).on("click", ".counter", function(){});，因为当页面最初加载时，具有类计数器的元素不存在，因此必须从静态委托click() 事件使用on() 添加计数器元素的父元素。然后将变量声明var $input = $("#txtCounter");移动到此click函数中，因为初始加载页面时id为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>

【讨论】：

@PranjalVatsa 很高兴我能提供帮助 :)

【解决方案2】：

您可以更改脚本并尝试如下操作：

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

});

【讨论】：