Jquery appending objects 곱셈 문제

사용자가 객체에서 객체를 생성 할 수있는 시스템에서 작업 중입니다. 이것은 Win7 스티커 메모 시스템과 비슷합니다. 스티커 메모는 새로운 스티커 메모를 만들고 자신을 삭제할 수 있습니다. jquery 함께 구현하려면 노력하고있어,하지만 거기에 새로운 개체를 추가하려고하면 중복 문제가 있습니다.Jquery appending objects 곱셈 문제

jquery에서 추가 및 삭제 버튼이 들어있는 객체의 html을 보유하는 변수 인 두 번째 "객체"를 작성하도록 코드에 지시합니다. html 페이지를 보면보다 의미가 있습니다. jquery에게 객체를 만들라고 말하면, 완벽하게 수행됩니다. 그것을 만든 객체가 더 많은 객체를 만들지 않는다는 것을 제외하고! 어떤 이유로 든 jquery는 방금 생성 한 새 객체의 존재를 인식하지 못합니다. 그리고 솔루션으로 나는 사용자가 add 또는 delete 버튼을 클릭하는 것을 듣는 .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>

, 누군가가)는 (i 만들기와 .clone을 사용하지 않고 자신의 이상을 삭제 할 수있는 JQuery와의 HTML 개체를 만들 수있는 방법을 기능을 말해 주실 래요 .

출처

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'를'click '할 때마다이 함수를 실행하십시오." 장점은'.addObject'가 시작 부분에 있었는지 또는 나중에 동적으로 추가되는지 여부와 상관 없으며 처음에는'.environment' 만 있으면됩니다. – Blazemonger

Jquery appending objects 곱셈 문제

답변

관련 문제