Question

I have some jquery code inserting a div like this

function popUpBox(){
$(".openBox").click(function(){     
    var id = $(this).attr('id');
    $("#"+id).append('<div class="box1"><div class="button1">Submit</div></div>');
    closeBox();
});
}

function closeBox(){
     $(".button1").click(function(){
          $(".box1").remove();
     });
}

The function popUpBox is called on document.ready. And of course I have a div like this…

<div class="openBox" id="id1">Open Box</div>

The closeBox() function does not seem bind the remove() event to the button. I have tried to use a bind and parent.remove but to no avail.

Answer 1

Your code works. The problem is that the click on the Submit buttons also triggers the parent event handler. So you are removing the popup box, but immediately adding one again.

Prevent triggering the parent event handler by stopping the event from bubbling up:

function closeBox(){
     $(".button1").click(function(e){
          e.stopPropagation();
          $(".box1").remove();
     });
}

quirksmode.org has a great article about this.

DEMO

That said, instead of binding the event handler every time again, you can bind it once and use event delegation:

function popUpBox(){
    $(".openBox").click(function(){     
        $(this).append('<div class="box1"><div class="button1">Submit</div></div>');

    }).on('click', '.button1', function(e) {
        e.stopImmediatePropagation();
        $(this).closest('.box1').remove();
    });
}

DEMO