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？

我使用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>

您可以通过为您的ID执行if语句来执行此操作，如上所示。幸运的是，在创建元素之后这很简单，如果没有jQuery，可能更容易做到，除非你对jQuery的能力有更多的了解。这是一个非常简单的例子，因为我猜你将使用jQuery，我在if jQuery中添加了。最后一件事是，为了防止在未加载jQuery时出现错误，请将所有内容包装在try catch语句周围，以便错误不会停止脚本。

我在点击按钮时添加一个元素，但如果存在则不应该

1 个答案: