38677


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

[code]

    // 数量入力枠を数字のみ受け付けるように
    $("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);
    });
    
[/code]

【質問】  
動的にしたら[JavaScript(Jquery)で、Table明細上の行追加ボタン押下で適時行追加を果たしたい。](https://ja.stackoverflow.com/questions/38545/javascriptjquery%e3%81%a7-table%e6%98%8e%e7%b4%b0%e4%b8%8a%e3%81%ae%e8%a1%8c%e8%bf%bd%e5%8a%a0%e3%83%9c%e3%82%bf%e3%83%b3%e6%8a%bc%e4%b8%8b%e3%81%a7%e9%81%a9%e6%99%82%e8%a1%8c%e8%bf%bd%e5%8a%a0%e3%82%92%e6%9e%9c%e3%81%9f%e3%81%97%e3%81%9f%e3%81%84)上記が働かなくなりました。  
$("input[name='amount']").on('keydown', function(e) {  
の部分を書き換えることで解決すると思うのですが、大変申し訳ございませんが どなたか教えて下さいませんか？何卒よろしくお願い申し上げます。


CC BY-SA 3.0
2017-10-13T00:57:26.620
38655
2017-10-13T08:47:59.030
25696
question
javascript jquery
動的に追加したinputタグ type="text" について、数値のみ入力、カンマ編集を達成したい


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

[code]

    <!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>
    
[/code]


CC BY-SA 3.0
2017-10-13T08:47:59.030
38677
2017-10-13T08:47:59.030
2265
38655
answer