.change() JQuery не работает

Question

У меня есть ряд элементов с классом xyz. Требование - пользователь должен вводить только одно число в них. Затем мне нужно их конкатенировать. Например, их счетчик будет читать 1200.

У меня есть внизу.

$('.xyz').change(function() { 
    console.log($(this)); 
    arrayNums.length = 0; 
    var thisRead = parseInt(CombinedNumber(arrayNums), 10); 
    var lastRead = parseInt($('.abcd').html(), 10); 
    if ((thisRead - lastRead) <= 1) { 
     $('#idthing').html("Your Last reading compared to this reading is " + (thisRead - lastRead) + " KWH <br>Are you SURE you want to submit this Reading?"); 
     $('#idthing').attr('style' , 'color: red !important'); 
    } 
    else { $('#idthing').text(thisRead - lastRead + ' KWH');} 
}); 

function CombinedNumber(arrayNums) { 
     combined = ""; 
     $('.xyz').each(function (index) { 
      arrayNums.push($(this).val()); 
     }); 
     $.each(arrayNums, function (index, value) { 
      combined += value; 
     }); 
     console.log(combined); 
     return combined 

Это работает в первый раз, если пользователь щелкает от области, прежде чем нажать кнопку отправки, но сначала они могут ударить кнопку отправки. Кроме того, он перестает делать расчет после первого раза!

Я пытаюсь получить отзывчивый расчет каждый раз, когда кто-то вводит число. Вот часть DOM.

<div> 
    <ul> 
    <li> 
     <input class="xyz"> 
    </li> 
    <li> 
     <input class="xyz"> 
    </li> 
    </ul> 
</div> 

Answer 1

Используйте input событие вместо change, как change обработчик будет вызываться только тогда, когда focus элемента теряется.

var arrayNums = []; 
 
$('.xyz').on('input', function() { 
 
    console.log($(this)); 
 
    arrayNums.length = 0; 
 
    var thisRead = parseInt(CombinedNumber(arrayNums), 10); 
 
    var lastRead = parseInt($('.abcd').html(), 10); 
 
    if ((thisRead - lastRead) <= 1) { 
 
    $('#idthing').html("Your Last reading compared to this reading is " + (thisRead - lastRead) + " KWH <br>Are you SURE you want to submit this Reading?"); 
 
    $('#idthing').attr('style', 'color: red !important'); 
 
    } else { 
 
    $('#idthing').text(thisRead - lastRead + ' KWH'); 
 
    } 
 
}); 
 

 
function CombinedNumber(arrayNums) { 
 
    combined = ""; 
 
    $('.xyz').each(function(index) { 
 
    arrayNums.push($(this).val()); 
 
    }); 
 
    $.each(arrayNums, function(index, value) { 
 
    combined += value; 
 
    }); 
 
    console.log(combined); 
 
    return combined; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div> 
 
    <ul> 
 
    <li> 
 
     <input class="xyz"> 
 
    </li> 
 
    <li> 
 
     <input class="xyz"> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

Попробуйте использовать JQuery вместо $

 jQuery('.xyz').change(function() { 
     console.log($(this)); 
     arrayNums.length = 0; 
     var thisRead = parseInt(CombinedNumber(arrayNums), 10); 
     var lastRead = parseInt($('.abcd').html(), 10); 
     if ((thisRead - lastRead) <= 1) { 
      $('#idthing').html("Your Last reading compared to this reading is " + (thisRead - lastRead) + " KWH <br>Are you SURE you want to submit this Reading?"); 
      $('#idthing').attr('style' , 'color: red !important'); 
     } 
     else { $('#idthing').text(thisRead - lastRead + ' KWH'); } 
     }); 

     function CombinedNumber(arrayNums) { 
     combined = ""; 
     $('.xyz').each(function (index) { 
      arrayNums.push($(this).val()); 
     }); 
     $.each(arrayNums, function (index, value) { 
      combined += value; 
     }); 
     console.log(combined); 
     return combined; 
    } 

Answer 3

Если вы создаете входы, имеющие класс .xyz динамически (Может быть на события нажатия кнопки), то ниже код будет работать здесь. попробуйте заменить $('.xyz').change(function() с $(document).on('change','.xyz',function()

$(document).on('change','.xyz',function() { 
    console.log($(this)); 
    arrayNums.length = 0; 
    var thisRead = parseInt(CombinedNumber(arrayNums), 10); 
    var lastRead = parseInt($('.abcd').html(), 10); 
    if ((thisRead - lastRead) <= 1) { 
     $('#idthing').html("Your Last reading compared to this reading is " + (thisRead - lastRead) + " KWH <br>Are you SURE you want to submit this Reading?"); 
     $('#idthing').attr('style' , 'color: red !important'); 
    } 
    else { $('#idthing').text(thisRead - lastRead + ' KWH');} 
});