Help with simple jQuery function

Question

Hi,

I have this bit of code.

What I want is when I click on .delbutton #slide will hide.

$(document).ready(function() {
    var slide = $('#slide')
    $('.link').click(function() {
        slide.animate({'bottom' : '0px'}, 500).append('<div class="delbutton"></div>')      
    });
});

$(document).ready(function(){
    $('.delbutton').click(function() {
        $('#slide').hide()
    })         
})

Cant figure out what is wrong with it. Just not working.

Thanks for your help

Answer 1

You can use live() as has been suggested in other answers, or set up the click event handler at the point you create <div class="delbutton">. BTW, is it intentional that it doesn't have any content?

$(document).ready(function(){
    var slide = $('#slide')
    $('.link').click(function(){
        var div = $('<div class="delbutton">Delete</div>').click(function(){
          slide.hide();
        }); 
        slide.animate({'bottom' : '0px'}, 500).append(div)
    });
});

Answer 2

Your click function is not being applied to anything because the DIV you are adding it to doesn't exist at the time it is applied. You need to use the live handler, which will work for a click handler, though not for all types of events.

$(".delbutton").live("click", function(){
  $('#slide').hide();
});

Answer 3

function(){$('#slide').hide();}

maybe semicolon at the end of hide() is needed?

P.s. use FireBug firefox add-on for JS debugging purposes if you don't do that already.

Answer 4

The only obvious thing for me is that you've missed a semi-colon here:

var slide = $('#slide')

And you're adding a click event to something that doesn't exist (yet)...

$(document).ready(function(){
    $('.link').click(function(){
        $('#slide').animate({'bottom' : '0px'}, 500).append('<div class="delbutton"></div>');
    });
    $('.delbutton').live(function(){
        $('#slide').hide();
    });
});

Answer 5

You need to attach the event on .delbutton after it has been appended like this:

$(document).ready(function(){
    var slide = $('#slide')
    $('.link').click(function(){
        slide.animate({'bottom' : '0px'}, 500).append('<div class="delbutton"></div>');
        $('.delbutton').click( function(){
            $('#slide').hide();
         });
     });
});

Another way to solve this problem would be use the the live() function to make the binding, that would not only effect the elements in the DOM, but the ones that will be added. The way you are doing this is a bit falty as you append a div everytime you clock on the .link. It would be better to only create it once, and then just show/hide it, or have it created from the start and then just show/hide it.