Question

我有一系列类MouseMotionListener的元素。要求是用户只需在其中输入一个数字。然后我需要连接它们。例如，他们的电表会显示xyz 1 2 0。

我在下面。

如果用户在点击提交按钮之前单击该区域，则第一次有效，但是他们可能首先点击提交按钮。此外，它在第一次发生后不再进行计算！

每次有人输入数字时，我都会尝试进行响应式计算。这是DOM部分。

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

使用input事件代替change因为change处理程序仅在元素的focus丢失时才会被调用。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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');}
});

.change（）Jquery无法正常工作

3 个答案: