CODEWITHSUNDEEP
jquery
Dom
Dom

Reputation: 3126

Help with simple jQuery function

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

Upvotes: 0

Views: 143

Answers (5)

halocursed
halocursed

Reputation: 2485

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();
});

Upvotes: 6

Russ Cam
Russ Cam

Reputation: 125488

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)
    });
});

Upvotes: 0

googletorp
googletorp

Reputation: 33265

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.

Upvotes: 0

Fenton
Fenton

Reputation: 250882

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();
    });
});

Upvotes: 0

Arnis Lapsa
Arnis Lapsa

Reputation: 47567

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.

Upvotes: 0

Related Questions