jquery add remove objects

Question

Hey guys quick question, I have an add remove script that will add a unique element and should remove it on a click function but does not. I think it is because the added object is not in the DOM when page is loaded but I am not sure how to fix this. IF anyone has any advice I would greatly appreciate it.

    $(document).ready(function(){
    if (action=='content-change'){
    $('#droppable2-inner').empty().append('<div id="content-image"><img id="visual-background2" src=' + src + '></div><div id="drop-content" action="drop-image">x</div>');
    }

    $("#drop-content").click(function() {  
      $('#content-image').remove();
     }); 

 })

Answer 1

Take a look at jquery live - that should do what you need.

Answer 2

try this instead of the .click, it will bind the click event to any matching element that is added in the page:

$("#drop-content").live('click', function() {  
      $('#content-image').remove();
});