检测对类型编号的输入框的更改

Question

我正在创建一个输入框表，并尝试检测对它们所做的任何更改，以便我可以更新总和字段，这是最后一列。我查看了许多建议并尝试了.change（）,. on（）和.bind（）函数，但它们似乎都没有工作。有人可以帮我这个吗？谢谢。

var Categories = function(name){
  this.name = name;
  this.non_hispanic_or_latino = new subCategories();
  this.hispanic_or_latino = new subCategories();
  this.unknown_ethnicity = new subCategories();
}

var subCategories = function(){
  this.female = 1;
  this.male = 2;
  this.unknown = 3;
}


function createTable(racial_categories){
  
  for(i=0; i<racial_categories.length; i++){
    
    $("#racial_ethnic_table").append('<tr></tr>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td>'+racial_categories[i].name+'</td>');
   
      $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].non_hispanic_or_latino.female+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].non_hispanic_or_latino.male+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].non_hispanic_or_latino.unknown+'"></input></td>');
    
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].hispanic_or_latino.female+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].hispanic_or_latino.male+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].hispanic_or_latino.unknown+'"></input></td>');
    
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].unknown_ethnicity.female+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].unknown_ethnicity.male+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].unknown_ethnicity.unknown+'"></input></td>');
     
    $("#racial_ethnic_table").find("tr").eq(i).append('<td readonly id="Rowtotal">'+findRowTotal(i)+'</td>');
  }
}

$('.inputBox').bind('input', function() {
  console.log("here");
});

function findRowTotal(row){
  var sum = 0;
   $('#racial_ethnic_table tr').eq(row).find("td input").each(function() {
      sum += parseInt($(this).val());
    });
  return sum;
}

$(function() {
  
  var american_indian_or_alaska_native = new Categories("american_indian_or_alaska_native");
  var asian = new Categories("asian");
  var native_hawaiian_or_other_pacific_islander = new Categories("native_hawaiian_or_other_pacific_islander");
  
  var racial_categories = [american_indian_or_alaska_native, asian, native_hawaiian_or_other_pacific_islander];
  
  createTable(racial_categories);
});

body,
html {
  width: 100%;
}

table {
  display: block;
  max-width: 100%;
}
table, tr{
  border: 1px solid black;
}
tr:nth-child(odd) {
    background-color: #dddddd;
}
td{
  width:2%;
}
input {
  text-align:center;
  width:99%;
  padding:1%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="racial_ethnic_table"></table>

Answer 1

您的错误是您需要在$(document)中找到元素并附加到事件input，如下所示：

$(document).on('input', '.inputBox', function() {
   console.log($(this).val());
});

＆＃13;

＆＃13;

var Categories = function(name){
  this.name = name;
  this.non_hispanic_or_latino = new subCategories();
  this.hispanic_or_latino = new subCategories();
  this.unknown_ethnicity = new subCategories();
}

var subCategories = function(){
  this.female = 1;
  this.male = 2;
  this.unknown = 3;
}


function createTable(racial_categories){
  
  for(i=0; i<racial_categories.length; i++){
    
    $("#racial_ethnic_table").append('<tr></tr>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td>'+racial_categories[i].name+'</td>');
   
      $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].non_hispanic_or_latino.female+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].non_hispanic_or_latino.male+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].non_hispanic_or_latino.unknown+'"></input></td>');
    
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].hispanic_or_latino.female+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].hispanic_or_latino.male+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].hispanic_or_latino.unknown+'"></input></td>');
    
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].unknown_ethnicity.female+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].unknown_ethnicity.male+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].unknown_ethnicity.unknown+'"></input></td>');
     
    $("#racial_ethnic_table").find("tr").eq(i).append('<td readonly id="Rowtotal">'+findRowTotal(i)+'</td>');
  }
}

$(document).on('input', '.inputBox', function() {
  console.log($(this).val());
});

function findRowTotal(row){
  var sum = 0;
   $('#racial_ethnic_table tr').eq(row).find("td input").each(function() {
      sum += parseInt($(this).val());
    });
  return sum;
}

$(function() {
  
  var american_indian_or_alaska_native = new Categories("american_indian_or_alaska_native");
  var asian = new Categories("asian");
  var native_hawaiian_or_other_pacific_islander = new Categories("native_hawaiian_or_other_pacific_islander");
  
  var racial_categories = [american_indian_or_alaska_native, asian, native_hawaiian_or_other_pacific_islander];
  
  createTable(racial_categories);
});

＆＃13;

body,
html {
  width: 100%;
}

table {
  display: block;
  max-width: 100%;
}
table, tr{
  border: 1px solid black;
}
tr:nth-child(odd) {
    background-color: #dddddd;
}
td{
  width:2%;
}
input {
  text-align:center;
  width:99%;
  padding:1%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="racial_ethnic_table"></table>

＆＃13;

＆＃13;

＆＃13;