.change() Jquery funktioniert nicht

Question

Ich habe eine Reihe von Elementen mit Klasse xyz. Die Anforderung besteht darin, dass ein Benutzer nur eine Nummer in sie eingeben muss. Ich muss sie dann zusammenfassen. Zum Beispiel würde ihr Zähler 1200 lesen.

Ich habe unten.

$('.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 

Dies funktioniert beim ersten Mal, wenn der Benutzer sich von dem Bereich klickt, bevor den Absenden-Button schlagen, aber sie könnten die Submit-Button zuerst getroffen. Außerdem hört es auf, die Berechnung nach dem ersten Mal zu tun!

Ich versuche jedes Mal, wenn jemand eine Nummer eingibt, eine ansprechende Berechnung zu erhalten. Hier ist der DOM-Teil.

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

Answer 1

Verwenden input Ereignis statt change als change Handler nur aufgerufen werden, wenn focus des Elements verloren.

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

Try jQuery Statt $

 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

verwenden Wenn Sie Eingänge schaffen Klasse mit .xyz dynamisch (auf Click-Ereignis von Taste sein kann) dann unter Code wäre hier arbeiten. versuchen $('.xyz').change(function() mit $(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');} 
});