jquery val () автоматически изменяется с числа на неопределенное во времени

Question

У меня есть «вход», который сводит меня с ума. входные данные "отражаются" от функции PHP на странице HTML.

    '<td class="product-quantity" data-title="Quantity">
                            <div class="quantity">
                <label class="screen-reader-text" for="quantity_5ed41a96cc5c6">Casual shirt quantity</label>
        <input
            type="number"
            id="input'.$e.'"
            class="qtychg input-text qty text"
            step="0.5"
            value="'.$arr[$e]['quantity'].'"
            size="4"
            inputmode="numeric" />
                <span class="product-qty-arrows">
            <span id="'.$e.'" class="product-qty-increase lnr lnr-chevron-up"></span>
            <span id="'.$e.'" class="product-qty-decrease lnr lnr-chevron-down"></span>
        </span>
        </div>
                            </td>'

Я могу увеличивать / уменьшать входное значение, используя диапазон "class =" product-qty-Increase " которые вызывают следующий javascript скрипт:

<script>
$('span').click(function (){

var Id=$(this).attr('id');
var val=$('#input'+Id).val();
var className= this.className;

if(className == "product-qty-increase lnr lnr-chevron-up"){

    val++;

}else if(className == "product-qty-decrease lnr lnr-chevron-down"){

    val--;
}

alert(val);

 $.ajax({
                        type: "POST",
                        url: "actions.php?action=chgQty",
                        data: "key=" + Id +"&val=" + val ,
                        success: function(result) { 
                          location.reload();
                        }
                     })


});
</script>

ПРОБЛЕМЫ, которые сводят меня с ума: 2:

1) «alert (val);» всплывает дважды !!! ! один с правильным номером, а второй - с "undefined"

2) очевидно, я могу » t отправить вызов $. ajax, потому что значение становится неопределенным.

Есть идеи ???

Answer 1

Причина в том, что у вас есть вложенные промежутки, и вы привязываете обработчик событий ко всем из них. Когда вы нажимаете на интервалы вверх или вниз, событие всплывает до <span class="product-qty-arrows"> и также запускается там.

Используйте более конкретный селектор c, чтобы вы могли привязаться только к кнопкам вверх и вниз.

$('span.lnr').click(function() {

  var Id = $(this).attr('id');
  var val = $('#input' + Id).val();

  if ($(this).hasClass("product-qty-increase")) {
    val++;
  } else if ($(this).hasClass("product-qty-decrease")) {
    val--;
  }

  alert(val);

  $.ajax({
    type: "POST",
    url: "actions.php?action=chgQty",
    data: {key: Id, val: val},
    success: function(result) {
      location.reload();
    }
  })
});