如何將動態內容添加到動態生成的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中？

回答

相關問題