ボタンをクリックしたときに要素を追加していますが、存在する場合は存在しません。

Question

ボタンがクリックされた後でdiv要素が追加されますが、前のクリックからは存在しません。

現在、新しいDOMがJQueryによって選択されていないため、要素を追加し続けます。

var validationMessage = function(msg, elemId) { 
     var valId = elemId + "_valId"; 
     if($(valId).length == 0) { 
      $("<div id='" + valId + "' class='error-message'>" + msg + "</div>").insertAfter(elemId); 
     } 
    }; 

私は私のクリックイベントにvalidationMessageを実行します。

$("#ele1").click(function(e) { 
    // validationMessage called in here 
}); 

なぜjQueryのピックアップは、新しいDOMではないのですか？

私は上記のようにあなたのIDのためのifステートメントを実行してこれを行うことができます1.9.1

Answer 1

function genText(text){ 
 
if(jQuery){ 
 
var ef = document.createElement("div"); 
 
ef.innerHTML = text; 
 
ef.setAttribute('id', 'msg'); 
 
ef.setAttribute('title', 'this is a title'); 
 
if(!document.getElementById('msg')){ 
 
$(ef).appendTo("body"); 
 
}else{ 
 
console.warn("Element already exists."); 
 
} 
 
}else{ 
 
console.warn("jQuery hasn't loaded in, yet."); 
 
} 
 
}

<style type="text/css">#msg{width: 200px; height:75px; background: white; border: 1px solid #000; color: black; cursor: text; box-shadow: 2px 2px 4px rgb(0,0,0);}</style> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button onclick="genText('Hi')">Generate Text</button>

を使用しています。幸いにも、これは要素を作成した後では非常に簡単ですが、jQueryの能力を少し熟知している場合を除き、jQueryを使用しなくても簡単です。これは本当に簡単な例です。jQueryを使用すると思われるので、if jQueryを追加しました。最後に、jQueryがロードされていないときのエラーを防ぐために、try catchステートメントのすべてをラップして、エラーがスクリプトを停止させないようにします。