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

您可以按照其他答案中的建议使用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)
    });
});

Answer 3

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

可能需要在hide（）结束时使用分号吗？

P.S。如果你不这样做，可以使用FireBug firefox附加组件进行JS调试。

Answer 4

对我来说唯一明显的事情就是你错过了一个分号：

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 5

你需要在事件附加后附加.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中的元素，还会影响将要添加的元素。你每次在.link上添加一个div时，你这样做的方式有点愚蠢。最好只创建一次，然后只显示/隐藏它，或者从头开始创建它，然后只显示/隐藏它。

帮助简单的jQuery函数

5 个答案: