javascript - 如何使用 for 循环生成 "x"jQuery 脚本？

Question

这听起来可能很奇怪，也可能确实如此，所以如果我犯了一个严重的错误，请原谅我。 我有一个未指定的号码 <input type='text'> ，在运行时生成，并使用进度编号 ID 进行标识，如 id='data1' , id='data2' ...我希望每个输入都有一个 jQuery 脚本。我想为 x 输入生成 x 脚本，但它不起作用。

我怎样才能做到这一点？

function addPreparations (nos, pietanze) {
  var numeroTotale = nos.value;
  var box = document.getElementById("box_righe");
  generateScripts(numeroTotale);
  if (numeroTotale == '') {
    box.innerHTML = '';
  }
  else {
    var righe = "<table class='table table-hover'>";
    righe += "<th class='text-center'>Pietanza</th><th class='text-center'>U. di Misura</th><th class='text-center'>Quantità</th><th class='text-center'>Cuoco</th><th class='text-center'>Data di Preparazione</th>";
    for (i = 1; i <= numeroTotale; i++) {
      righe = righe + "<tr><td><select name='pietanza"+i+"' class='form-control' onchange='showMU(this.value, \"p\", "+i+");'>";
      righe = righe + "<option value=''>Selezionare la pietanza "+i+"</option>";
      for (j=0; j<pietanze.length; j++) {
        righe = righe + "<option value='"+pietanze[j]+"'>"+pietanze[j]+"</option>";
      }
      righe = righe + "</select></td>";
      righe = righe + "<td align='center'><p id='umis"+i+"' class='h5'>- - -</p></td>";
      righe = righe + "<td><input type='number' placeholder='Inserire la quantità' name='quantita"+i+"' class='form-control'/></td>";
      righe = righe + "<td><input type='text' placeholder='Inserire il cuoco' name='cuoco"+i+"' class='form-control'/></td>";
      righe = righe + "<td><input type='text' placeholder='GGMMAAAA' id='data"+i+"' class='form-control' name='data"+i+"' /></td></tr>";
    }
    righe = righe + "</table>";

    righe = righe + "<input type='submit' name='storageConfirm' value='Conferma' class='btn btn-success'/>&nbsp&nbsp";
    righe = righe + "<input type='reset' value='Reimposta' class='btn btn-danger'/>";

    box.innerHTML = righe;
  }
}

function generateScripts (total) {
  for (i=1; i<=total; i++) {
    $(document).ready(function() {
      $("body").on('keydown', '#data'+i, function(e) {
        if ((e.keyCode == 8) || (e.keyCode >= 96 && e.keyCode <= 105) || (e.keyCode >= 48 && e.keyCode <= 57)) {
          return;
        }
        else {
          alert("Solo numeri!");
          e.preventDefault();
        }
      });
    });
  }
}

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

Answer 1

使用属性选择器 [] 并以 ^ 选择器 ([id^="data"]) 开头，您的代码应该是:

$(document).ready(function() {
    $("body").on('keydown', '[id^="data"]', function(e) {
        //Your logic HERE
    });
});

或者您可以为所有输入提供一个公共(public)类并将其用作选择器，例如:

$(document).ready(function() {
    $("body").on('keydown', '.common_class', function(e) {
        //Your logic HERE
    });
});

注意:在跟踪用户输入时最好使用 input 事件，例如:

$(document).ready(function() {
    $("body").on('input', '[id^="data"]', function(e) {
        //Your logic HERE
    });
});

希望这有帮助。