.change（）Jqueryが機能しない

Question

私はクラスxyzの一連の要素を持っています。要件は、ユーザーが1つの番号だけを入力する必要があることです。私はそれらを連結する必要があります。たとえば、そのメーターは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

利用要素のfocusが失われた場合にのみ、ハンドラが呼び出されますchangeとして代わりにchangeのinputイベント。

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

あなたは、コードの下に（ボタンのクリックイベント上にあってもよい）、動的にクラス.xyzを持つ入力を作成している場合は代わりに$

 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

のjQueryのを使用してみてくださいここで働くだろう。 $(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');} 
});