jquery로 동적으로 생성 된 요소를 어떻게 조작 할 수 있습니까?

Question

저는 jquery 초보자이고 jquery로 상자를 만든 다음 "삭제"합니다. 그러나 동일한 코드를 사용하여 생성 된 요소 범위와 이미 생성 된 요소의 범위를 삭제하려고합니다.

HTML :

<button id="create">Cria</button> 
    <div id="main"> 
     <div class="box"> 
      <a class="del-btn" href="#">Delete</a> 
     </div> 
</div> 

JS :

var box = { 

    create: function() { 
     var box = $('<div class="box">'); 
     var delBtn = $('<a class="del-btn" href="#">Delete</a>'); 
     box.appendTo('#main'); 
     delBtn.appendTo(box); 
    }, 

    destroy: function(elem) { 
    elem.fadeOut(); 
    } 

} 

function deleteBox() { 

} 

$(function() { 

    $('#create').click(function() { 
    box.create(); 
    }); 

    $('.del-btn').click(function() { 
    var elem = $(this).parent(); 
    box.destroy(elem); 
    return false; 
    }); 

}); 

내가 만들 클릭 이벤트 내부의 삭제 이벤트를 넣으면, 난 그냥 동적으로 생성 된 요소를 삭제할 수 있습니다. 바깥에 놓으면 HTML의 요소를 삭제할 수 있습니다. 나는 이것이 간단한 질문이라는 것을 알고 있지만 그것을 해결하는 방법을 알 수는 없다. 감사합니다

Answer 1

당신은 delegated-events approach를 사용할 수 있습니다

$("#main").on("click", ".del-btn", function() { 
    var elem = $(this).parent(); 
    box.destroy(elem); 
    return false; 
});