如何将动态内容添加到动态生成的div中？

基本上我验证表单，我收集错误消息，我追加他们一个div产生dynamiclly。现在，我不能这个div。在这里追加这些消息是我做了什么如何将动态内容添加到动态生成的div中？

//generates a div onclick of submit button 
$("body").append("<div class='overlay'><div class='errorContainer'>.html(errorMsg)</div><div>`<a href='javascript:void(0);' class='cross'>X</a><div></div>");

.html(errorMsg)这将导致错误/是不正确

function closeErrorBox() { 
      var errorMsg = ""; 
       var ferrorMsg = "Please say your first name" + "<br>"; 
       var aerrorMsg = "Please type address" + "<br>"; 
       var eerrorMsg = "Please type a valid email Address" + "<br>" 
       if($("#name").val() == "") { 
        errorMsg += ferrorMsg; 
       } 
       if($("#address").val() == "") { 
        errorMsg += aerrorMsg; 
       } 
       if($("#email").val() == "") { 
        errorMsg += eerrorMsg; 
       } 

       $(".errorContainer").html(errorMsg); 


       $(".overlay").remove(); 
       }

来源

2012-03-25 Mike

.errorContainer div位于.overlay div内。当你在函数的最后删除覆盖层时，errorContainer也会被删除。除此之外，它似乎.html(errorMsg) 工作正常（如果它仍然导致错误，请指出发生了什么问题）。

重读你的问题，我无法理解你的程序的流程：要补充该分区的时候就已经是已知的错误，并关闭它，当你点击“X”？如果多数民众赞成的情况下，我会建议做这样的事情：

var errorMsg = ""; 
var ferrorMsg = "Please say your first name" + "<br>"; 
var aerrorMsg = "Please type address" + "<br>"; 
var eerrorMsg = "Please type a valid email Address" + "<br>" 
if($("#name").val() == "") { 
    errorMsg += ferrorMsg; 
} 
if($("#address").val() == "") { 
    errorMsg += aerrorMsg; 
} 
if($("#email").val() == "") { 
    errorMsg += eerrorMsg; 
} 

// Adapting Diego's answer: 
$("<div class='overlay'><div class='errorContainer'></div><div><a href='javascript:void(0);' class='cross'>X</a><div></div>") 
    .appendTo($("body")) 
    .find(".errorContainer") 
     .html(errorMsg) 
     .end() 
    .find(".cross") 
     .click(function(e) { 
      e.preventDefault(); 
      $(this).closest(".overlay").remove(); 
     });

来源

2012-03-25 20:31:27 mgibsonbr

这看起来非常有希望，但我只是有一个问题，每次我点击提交按钮，它会添加一个叠加。你是否会编码删除该问题。谢谢 – Mike 2012-03-26 04:29:10

不，它不会。如果你只需要一个覆盖层，我建议不要动态创建它，但静态（把它放在你的html中）。让它开始隐藏（'style =“display：none”'），在提交时显示它（'$（“.overlay”）.show（）'）并将它隐藏在'.cross'的点击（'$（ “叠加”）。隐藏（）'）。这样你可以避免不必要的附加/删除。 – mgibsonbr 2012-03-26 04:56:59

它不起作用，萤火说ERRORMSG没有在该行的.html（ERRORMSG） – Mike 2012-03-28 18:57:29

我想你的意思是：

//generates a div onclick of submit button 
$("body").append("<div class='overlay'><div class='errorContainer'></div><div><a href='javascript:void(0);' class='cross'>X</a><div></div>").find(".errorContainer").html(errorMsg);

来源

2012-03-25 20:26:09 Diego

如果有一个以上的'.overlay'，所有的'.errorContainer's页面将收到相同的错误消息。我建议在新创建的div上使用'appendTo'，而不是在body上添加'appendTo'（所以'find'将被限制在那个div上）。 – mgibsonbr 2012-03-25 20:50:02

谢谢，但每次点击提交按钮时，都会添加叠加层。我如何避免它。我的意思是只添加叠加一次 – Mike 2012-03-26 04:26:44

如何将动态内容添加到动态生成的div中？

回答

相关问题