0

標題の件、ありがちな質問かと思うのですが、以前は動的でなくHTML側に当該のinutタグを定義していたので、CSSをかじったばかりの知識ながら、属性セレクタみたい感じでJS(JQuery)を記載しうまく動作できてました。

// 数量入力枠を数字のみ受け付けるように
$("input[name='amount']").on('keydown', function(e) {
    var k = e.keyCode;
    if(!((k >= 48 && k <= 57) || (k >= 96 && k <= 105) || k == 32 || k == 8 || k == 9 || k == 46 || k == 39 || k == 37)) {
                return false;
    }
});

// 数量入力枠にカンマを自動挿入
$("input[name='amount']").on('blur', function(){
    var num = $(this).val();
    num = num.replace(/(\d)(?=(\d\d\d)+$)/g, '$1,');
    $(this).val(num);
});
// 数量入力枠からカンマを除去(カーソルあたった時)
$("input[name='amount']").on('focus', function(){
    var num = $(this).val();
    num = num.replace(/,/g, '');
    $(this).val(num);
});

【質問】
動的にしたらJavaScript(Jquery)で、Table明細上の行追加ボタン押下で適時行追加を果たしたい。上記が働かなくなりました。
$("input[name='amount']").on('keydown', function(e) {
の部分を書き換えることで解決すると思うのですが、大変申し訳ございませんが どなたか教えて下さいませんか?何卒よろしくお願い申し上げます。

3
  • 1
    質問単体で完結することはできませんか? また質問内容も簡潔にしてください。例えばイベントハンドラで実行される内容は質問と無関係で、「動的に追加したinputタグ type=“text” にイベントハンドラを設定したい」ではありませんか?
    – sayuri
    Commented 2017年10月13日 2:19
  • 試してないですが、.clone でイベントごとクローンを作成すればいいんじゃないかと思いますけど。
    – BLUEPIXY
    Commented 2017年10月13日 3:53
  • sayuri様・BLUEPIXY 様  達成したいこと、達成方法が結びついていないので、コーディングが全く別のタイミングになってしまいました。仰られるように、「動的に追加したinputタグ type=“text” にイベントハンドラを設定したい」の一言です、申し訳ありません。3つの動作を一つのイベントスクリプトにまとめることができるのですかね??全然わかっていなくて...
    – saya24
    Commented 2017年10月13日 5:23

1 件の回答 1

0

clone()する時にclone(true)としないとイベントを引き継ぎませんので、以下のようにしてはどうでしょう?
「3つの動作を一つのイベントにまとめる」という部分もこのようなことをおっしゃっていると解釈したのですがいかがでしょうか?イベントの中身は何も変えていません。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {

  // keydown/blur/focus イベントまとめ
  $("input[name=amount]").on({
    "keydown": function(e) {
      var k = e.keyCode;
      if (!((k >= 48 && k <= 57) || (k >= 96 && k <= 105) || k == 32 || k == 8 || k == 9 || k == 46 || k == 39 || k == 37)) {
        return false;
      }
    },
    "blur": function() {
      var num = $(this).val();
      num = num.replace(/(\d)(?=(\d\d\d)+$)/g, '$1,');
      $(this).val(num);
    },
    "focus": function() {
      var num = $(this).val();
      num = num.replace(/,/g, '');
      $(this).val(num);
    }
  });

  // clone処理追加
  $("#btn").on("click", function() {
    var element = $("input[name=amount]").clone(true);
    $("#add").append(element);
    return false;
  });
});
</script>
</head>
<body>
  <button id="btn">Add</button><br>
  <div id="add">
    <input type="text" name="amount">
  </div>
</body>
</html>
1
  • miiitaka様 無事にできました。行追加のFunction=Cloneに引数TRUEを与えて、提示のイベントまとめの形態にしただけでバッチリです。ご支援をありがとうございました。また一つ勉強になりました。
    – saya24
    Commented 2017年10月13日 9:43

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。