[JavaScript] 行を追加したらjQueryが発火しないときー

JavaScript

2018.10.26

行を追加したらDatePickerが動かない！！！

で、てんぱって解決して一段落・・・

と思ったらjQueryが動かない！！！！！！！

そんなときのメモ

$("#addCol").click(function () {
    var count = $("#Table tbody").children().length;
    $("#noticeTable").append(`<tr>
                    <td class="align-middle text-center"><input id="input` + count + `"  ></td>
                    <td class="align-middle"><input  type="text" class="form-control datepicker validate[condRequired[],custom2025/11/04] "  /></td>
                    <td class="align-middle"><textarea  maxlength="200" class="form-control validate[condRequired[],maxSize[200]] areaHeight "></textarea></td>
                    <td class="align-middle"><input  type="text" maxlength="40" class="form-control  validate[condRequired[],maxSize[40]] "  /></td>
                </tr>`);
});

こんな感じで行を追加したとして、

$(function() {
  var textarea = $('.areaHeight');
  var lineHeight = parseInt(textarea.css('lineHeight'));
  textarea.on('input', function() {
    var lines = ($(this).val() + '\n').match(/\n/g).length;
    $(this).height(lineHeight * lines);
  });
});

こんな感じのjQueryを動かそうとしていた時・・・・

発火しない。。

ちなみにこれはテキストエリアで改行すると
その分テキストエリアが広がるっていう感じの処理。

もともとの部分はちゃんと広がるなー・・・・

そんなときは
textarea.on('input' , function(){})
ではなく、

$(function () {
    var textarea = $('.areaHeight');
    var lineHeight = parseInt(textarea.css('lineHeight'));
    $(document).on('input', '.areaHeight', function () {
        var lines = ($(this).val() + '\n').match(/\n/g).length;
        $(this).height(lineHeight * lines);
    });
});

このように
$(document).on('input', '.areaHeight', function () {}

とやってあげると上手くいった