Jquery附加對象乘法問題

我正在研究一個允許用戶從對象生成對象的系統。它類似於Win7便籤系統;粘滯便箋可以製作新的便籤，並自行刪除。我試圖用jQuery來實現這一點，但當我嘗試添加新對象時存在重複問題。Jquery附加對象乘法問題

在jquery中，我告訴代碼創建第二個「對象」，它是一個變量，其中包含一個包含添加和刪除按鈕的對象的html。如果您查看html頁面，則更有意義。當我告訴jquery製作對象時，它完美無瑕。除了它製作的物體不會製造更多的物體！由於某種原因，jquery不能識別它剛創建的新對象的存在。作爲一種解決方案，我嘗試重新說明.click（）函數，該函數偵聽用戶單擊添加或刪除按鈕。只有當我添加一個新對象時，這隻會使數量增加，並且整個過程中刪除按鈕不能正常工作。

有人可以修復我的代碼嗎？

<html> 
    <head> 
     <style type="text/css"> 
      .environment {height:500px; width:500px; border:1px solid black;background:lightyellow;text-align:center;overflow:auto;} 
      .object {height:50px; width:40%;border:1px solid black;background:#F0F0F0;padding:5px;margin:5px;float:left;} 
      .delObject {float:right;} 
     </style> 
     <script type="text/javascript" src="jquery-1.7.2.js"></script> 
     <script type="text/javascript"> 
      var object = "<div class='object'>object<br /><button class='addObject'>addObject()</button><button class='delObject'>delObject()</button></div>"; 
      $(function() { 
       $(".addObject").click(function(){addObject()}); 
      }); 
      $(function() { 
       $(".delObject").click(function(){ 
        $(this).parent().remove(); 
       }); 
      }); 
      function addObject() { 
       $(object).appendTo(".environment"); 
       $(function() { 
        $(".addObject").click(function(){addObject()}); 
       }); 
       $(function() { 
        $(".delObject").click(function(){ 
         $(this).parent().remove(); 
        }); 
       }); 
      } 
     </script> 
    </head> 
    <body> 
     <div class="environment">environment<br /> 
      <div class="object">object<br /> 
      <button class="addObject">addObject()</button> 
      <button class="delObject">delObject()</button> 
     </div> 
     </div> 
    </body> 
</html>

如果這一切似乎太複雜了，有人可以告訴我的方式，我可以讓jQuery的HTML對象，這也有能力實現和刪除多自己不使用.clone（）函數。

來源

2012-05-17 jcrowley

活動代表團。

$(function(){ 
    var object = "<div class='object'>object<br /><button class='addObject'>addObject()</button><button class='delObject'>delObject()</button></div>"; 
    $(".environment") 
     .on("click", ".addObject", function() { 
      $(object).appendTo(".environment"); 
     }) 
     .on("click", ".delObject", function() { 
      $(this).parent().remove(); 
     });   
});

代碼乘以每次點擊的原因是你增加一個額外的點擊事件與所有現有要素類表示每次添加一個新的。通過事件委派，您不再需要將事件綁定到每個元素，相反，祖先元素（.environment）處理事件。

來源

2012-05-17 14:31:26

你能否向我解釋一下你的事件代表團的含義？我有一個基本的jQuery腳本視圖。 – jcrowley

已更新爲什麼您的代碼正在相乘，以及我的代碼如何修復它。 –

將事件委派視爲守望者，並關注特定的DOM元素。答案的代碼是這樣說的：「觀看'.environment'元素，每當有人點擊其內部的'.addObject'時，運行此函數。」好處是，如果'.addObject'在開始時存在並不重要，或者以後是否動態添加 - 您只需要'.environment'在開始處。 – Blazemonger

Jquery附加對象乘法問題

回答

相關問題