実現したいこと
ユーザーの操作により、動的に追加される要素を取得する場合についてお伺いします。
通常の document.getElementById() などでは読み込まれた際の情報しか取得できないのですが、ユーザーの操作により追加される要素を取得する場合だとどの様にすれば良いのでしょうか。
<input id="elem" type="text" /> <!-- ここにid addelem0(n)-errorが追加される -->
追加される要素の addelem0(n)-errorを取得したいのですが、、
let apd = document.getElementById('addelem0(n)-error'); console.log(apd);
上述の様に、ページが読み込まれたタイミングではなく要素が追加・削除されたタイミングで取得をしたいです。
どの様にすれば addelem0(n)-errorを取得できるのかご指導頂ければと思います。
よろしくお願いいたします。
追記です。
ご回答ありがとうございます。
説明不足でしたすみません。
addelem0(n)-error 要素を書き出す コード(既存コード)は別にあって、ユーザーの操作によって追加されたり非表示(display:none)にされたりするのですが、
これを今回別のコードから取得する形になります。
上記のコードだとページが読み込まれた何もない状態(Null)が取得されますよね。。
こちらをaddelem0(n)-error 要素が追加・削除される際取得したいです。
ソースコードは、サンプルページと、少し長くなってしまいますがこちらに既存コードも一応載せておきます。
このフォームをブランクのままフォーカスを外したときに表示される label要素を取得したいです。
###サンプルページ
http://app.liz.blue/jstest/valid/
###HTML
<div class="parent"> <form class="formbase" action="action.php" method="post" id="mail-form" novalidate="novalidate"> <dl class="item-container table elempar3"> <dd class="item-minbox cell"> <div class="with-validate sellabel"> <span id="elemtxt" class="elemtxt"> <input id="addelem01" class="validating1" type="text" name="名まえ" placeholder="例)なの"> <!-- ここに取得したい要素が入ります --> </span> <span id="elemtxt" class="elemtxt"> <input id="addelem02" class="validating2" type="text" name="ねんれい" placeholder="例)18"> <!-- ここに取得したい要素が入ります --> </span> </div> </dd> </dl> </form> </div>
###Javascript(既存コード)
こちらのコードによって書き出される要素を取得します。
要素の取得は別のコードから行い、このコードの編集はしません。
(function($){ $.extend($.validator.messages, { required: "必須項目です。", email: "メールアドレスは正しい形式で入力して下さい。", phone: "電話番号は数字で入力して下さい。", }); var methods = { phone: function(val, ele){ return this.optional(ele) || /^\d{10}|\d{11}$/.test(val); } }; $.each(methods, function(key, callback){ $.validator.addMethod(key, callback); }); $(function(){ var emptyBgFunc = function(ele){ var bgVal = ( String( $(ele).val() ) === "" ) ? "#ffffff" : "#ffffff"; $(ele).css('background-color', bgVal); //$(ele).css('pargin-bottom', 40 + 'px'); }; var makeValidatingCls = function(idx){ //index + α のクラスを作る var cls = 'validating' + idx.toString(); return cls; }; var getValidatingCls = function(ele){ var cls = $(ele).attr('class').match(/(?:^|[ ])(validating[0-9]+)/); cls = (typeof cls === 'object' && typeof cls[1] !== 'undefined') ? cls[1] : ''; return cls; }; var errHiddenFunc = function(ele){ var $err = $(ele).next('.error'); if($err.length){ $err.css('display', 'none'); } }; var rules = {}, messages = {}, errTimeouts = {}; var $inputs = $(".with-validate :input"); var imeOffTypes = ['email', 'tel']; $inputs.each(function(idx){ $ipt = $(this); var type = $ipt.attr('type'); if( $.inArray(type, imeOffTypes) > -1 ){ $ipt.css('ime-mode', 'disabled'); } var name = $ipt.attr('name'); var rule = {}; switch(type){ case 'tel': rule = { phone: true, required: true }; message = { phone: name + "は数字のみ11桁(-ハイフンなし)で入力して下さい。", required: name + "を入力して下さい。", }; break; default: rule = { required: true }; message = { required: name + "を入力して下さい。", }; break; } rules[name] = rule; messages[name] = message; var cls = makeValidatingCls(idx); $ipt.addClass(cls); errTimeouts[cls] = false; emptyBgFunc($ipt.get(0)); $ipt.on('focusout', function(){ emptyBgFunc(this); }); $ipt.on('focus', function(){ errHiddenFunc(this); var cls = getValidatingCls(this); errTimeouts[cls] = false; }); }); var validator = $("#mail-form").validate({ rules: rules, messages: messages, onfocusout: function(ele, event){ validator.element(ele); var cls = getValidatingCls(ele); var timer = setTimeout(function(){ if(errTimeouts[cls] === timer){ errHiddenFunc(ele); } }, 5000); errTimeouts[cls] = timer; }, }); }); })(jQuery);