Помогите с простой функцией jQuery

Question

У меня есть этот бит кода.

То, что я хочу, это когда я нажимаю на .delbutton #slide скроет.

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

Не могу понять, что с ним не так. Просто не работает.

Спасибо за вашу помощь

Answer 1

Ваша функция щелчка не применяется ни к чему, потому что DIV, к которому вы добавляете ее, не существует на момент ее применения. Вам нужно использовать обработчик live , который будет работать для обработчика щелчков, но не для всех типов событий.

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

Answer 2

Вам нужно прикрепить событие к .delbutton после того, как оно было добавлено следующим образом:

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

Другим способом решения этой проблемы было бы использование функции live () для привязки, которая будет влиять не только на элементы в DOM, но и на те, которые будут добавлены. То, как вы это делаете, немного ошибочно, когда вы добавляете div каждый раз, когда смотрите на .link. Было бы лучше создать его только один раз, а затем просто показать / скрыть или создать его с самого начала, а затем просто показать / скрыть.

Answer 3

Единственная очевидная вещь для меня - это то, что вы пропустили точку с запятой здесь:

var slide = $('#slide')

И вы добавляете событие щелчка к чему-то, что еще не существует ...

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

Answer 4

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

может быть точка с запятой в конце hide () нужна?

P.s. используйте FireBug Firefox для отладки JS, если вы этого еще не сделали.

Answer 5

Вы можете использовать live(), как было предложено в других ответах, или настроить обработчик события щелчка в точке, которую вы создаете <div class="delbutton">. Кстати, это намеренно, что он не имеет никакого контента?

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