jQuery onclick 函数没有触发

Question

我有一个“链接”，单击该链接后，将显示一个充满内容的 div。单击后，“打开”按钮将更改为具有关闭功能的“关闭”按钮。

jQuery Code

$(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 click 函数粘贴到 Firebug 控制台中，运行它，然后单击，它会按预期关闭。

有什么想法吗？

Answer 1

填充页面时，类 $('.close_user_urls') 不存在 - 因此当单击绑定(bind)在 $(document).ready() 上时，类 $('.close_user_urls') 不存在。

使用 jQuery 1.3.2 实现此目的的最简单方法是使用“live”函数:

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

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