Question

我有一个'链接'，点击后会显示一个内容丰富的div。点击后，“打开”按钮变为“关闭”按钮，具有关闭功能。

这是jQuery：

$(document).ready(function(){


    $('.open_user_urls').click(function() {
            $('#user_urls').slideDown('slow');
            $('.open_user_urls').addClass('close_user_urls');
            $('.open_user_urls').removeClass('open_user_urls');
            $('.close_user_urls').html('Close Search History');
            return false;
        }
    );

    $('.close_user_urls').click(function() {
            $('#user_urls').slideUp('slow');
            $('.close_user_urls').addClass('open_user_urls');
            $('.close_user_urls').removeClass('close_user_urls');
            $('.open_user_urls').html('Show Search History');
            return false;
        }
    );

});

首次点击时，它按预期工作。显示div，将html内容更改为新文本，并在链接上更改类。

但再次点击关闭它什么也没做。如果我将.close__user_urls单击功能粘贴到Firebug控制台，运行它，然后单击，它会按预期关闭。

有什么想法吗？

Answer 1

当填充页面时，类$（'。close_user_urls'）不存在 - 因此当它的点击绑定在$（document）.ready（）时它不存在。

使用jQuery 1.3.2实现这一目标的最简单方法是使用“实时”功能：

$(document).ready(function(){
   $('.open_user_urls').live('click', function() {
       $('#user_urls').slideDown('slow');
       $(this).addClass('close_user_urls');
       $(this).removeClass('open_user_urls');
       $(this).html('Close Search History');
       return false;
   });

   $('.close_user_urls').live('click', function() {
       $('#user_urls').slideUp('slow');
       $(this).addClass('open_user_urls');
       $(this).removeClass('close_user_urls');
       $(this).html('Show Search History');
       return false;
   }); 
)};

实时函数将指定的事件绑定到所有当前和将来的匹配元素。

Answer 2

我认为第二个函数仅适用于具有CSS类'.close_user_urls'的元素，最初为0。

在旧版本的jQuery中，livequery plugin将让jQuery跟踪并添加/删除点击事件，因为项目获取并丢失了css类。在较新的版本中，这是内置的，如上面的答案所述。

Answer 3

我会做不同的事情：

$(document).ready(function(){
    $('.open_user').click(function() {
        var link = $(this);
        if (link.hasClass('opened')) {
            link.removeClass('opened').text('Show Search History');
            $('#user_urls').slideUp('slow');
        } else {
            link.addClass('opened').text('Close Search History');
            $('#user_urls').slideDown('slow');
        }
        return false;
    }
);

jQuery onclick函数没有触发

3 个答案: