动态添加 increment/decrement 计数器

Question

我正在尝试实现动态 increment/decrement 计数器。它应该是这样工作的：

我有一个 'ADD' 按钮。当我点击它时，它应该消失，并且应该出现一个减号按钮、数字输入和加号按钮。单击“+”应该增加 "cart" 上的计数器，单击“-”应该减少。

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

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

我是不是漏了什么？？

Answer 1

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

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

});

动态添加 increment/decrement 计数器

Dynamically add increment/decrement counter

javascript

jquery

counter