使用jquery動態創建html元素

我需要一種方法來解決這個問題。在我使用的jQuery 1.9中刪除了live()。所以現在我不知道如何動態地將一個元素添加到文檔對象模型樹中。使用jquery動態創建html元素

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Trying dynamic adding</title> 
     <style> 

      body { 
       margin:10%; 
      } 
      #cool { 
       border:5px solid red; 
      } 
      .fool { 
       background-color:red; 
       width:100px; 
       height:100px; 
       border:1px solid green; 
      } 
      .lol { 
       background-color:yellow; 
      } 

     </style> 
     <script src="jquery.js"></script> 
     <script> 

     $(document).ready(function(){ 
      alert("Application has been started"); 
      $('#hool').addClass("lol"); 
      $('#create').click(function(){ 
       alert("Element created here"); 
       var a=$('#cool'); 
       b="<div class='fool'></div>"; 
       a.append(b); 
       alert("Element created"); 
       var c=$('.fool'); 
       c.addClass("lol"); 
      }); 
      $('.lol').click(function(){ 
       alert("New elements are good to go"); 
       $('.lol').css("background-color","teal"); 
      }); 
      function hello(){ 
       alert("welcome"); 
      } 
     }); 
     function hello(){ 
      alert("welcome"); 
     } 

     </script> 
    </head> 

    <body> 

     <section id=cool> 

      <button id=create> Create </button> 
      <button id=hool>Doubt</button> 
     </section> 

    </body> 
</html>

在這段代碼的問題是，當我點擊id爲按鈕創建與類fool創造新的分裂標記。這只是與CSS工作，而不是JavaScript。例如編號爲hool的按鈕以及使用類傻瓜創建的新分區標籤正在分配給稱爲lol的另一個類。現在按鈕正在工作，當我點擊按鈕$('.lol').click(function)正在工作。但是當我按下新創建的標籤時，它不會執行該功能。因爲該按鈕是在頁面加載時添加的，但新的div標籤是使用append方法動態創建的。

現在請有人告訴我如何通過點擊新的div標籤來運行$('.lol').click(function)。我目前正在做一個項目，所以請幫助。歡迎所有的答案。提前致謝。

來源

2015-08-13 karthi keyan

在元素創建後綁定處理程序，查看我的答案。 – VMcreator

你應該試試這個：

$(document).on('click', '.lol', function() { 
    //do something 
});

有關信息，請閱讀Event delegation

來源

2015-08-13 06:06:47

根據您鏈接的文檔不應該是$（'＃cool'）。on（'。lol'，'click'，function（）{// do something}）; –

應該避免這種情況，在文檔樹頂部附近附加許多委派的事件處理程序可能會降低性能。每次事件發生時，jQuery都必須將該類型的所有附加事件的所有選擇器與從事件目標到文檔頂部的路徑中的每個元素進行比較。爲獲得最佳性能，請在儘可能靠近目標元素的文檔位置附加委派事件。避免過多使用文檔或document.body來處理大型文檔上的委派事件。 – VMcreator

嘗試使用一樣，

$('#cool').on('click','.lol',function(){ 
    alert("New elements are good to go"); 
    $(this).css("background-color","teal"); // use this in place of .lol again 
});

來源

2015-08-13 06:08:44

當然的處理程序不會被綁定到，因爲事件當你試圖綁定它們時，元素還沒有存在，所以解決方案在創建元素後綁定處理程序，如下所示：

$('#create').click(function() 
    { 
     alert("Element created here"); 
     var a=$('#cool'); 
     b="<div class='fool'></div>"; 
     a.append(b); 
     alert("Element created"); 
     var c=$('.fool'); 
     c.addClass("lol"); 
     c.click(function() 
     { 
      alert("New elements are good to go"); 
      $('.lol').css("background-color","teal"); 
     }); 
    });

當我點擊#create時，我所做的是直接將綁定事件綁定到創建的元素。

刪除此行：

$('.lol').click(function() 
{ 
    alert("New elements are good to go"); 
    $('.lol').css("background-color","teal"); 
});

因爲你已經綁定處理新元素後創建。

來源

2015-08-13 06:11:23 VMcreator

問題在於，當您嘗試選擇它時，'.lol'元素尚未存在，以便將單擊事件偵聽器附加到它。您需要在存在後選擇它，也許在創建它的相同功能中使用，或者使用event delegation。要使用事件委託，請將$('.lol').click(function()更改爲$('#cool').on('click', '.lol', function()

來源

2015-08-13 06:14:45

與我的答案一樣 – VMcreator

使用jquery動態創建html元素

回答

相關問題