我如何操縱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; 
});