jQuery onclick函数没有触发

Question

我有一个"链接",点击后会显示满满的内容.单击后,"打开"按钮将变为具有关闭功能的"关闭"按钮.

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

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