JQuery 函数不会在第一次单击时触发，但在所有后续单击时都会按预期运行

Question

我只需要将选定的链接显示为选定状态并显示指示的 div，同时隐藏其他两个。这是 jsfiddle:

http://jsfiddle.net/HZ4CZ/1/

为什么第一次点击不起作用，但此后每次点击都起作用？

$(document).ready(function() {
    $('ul#chooseType li a').click(function(e) {   
        $('#active').click(function(){
            $('.activeDiv').removeClass('show_hide');
            $('.inactiveDiv').addClass('show_hide');
            $('.thirdMenuDiv').addClass('show_hide');
            $('#active').addClass('selected');
            $('#inactive').removeClass('selected');
            $('#thirdMenu').removeClass('selected');
        });
        $('#inactive').click(function(){
            $('.activeDiv').addClass('show_hide');
            $('.inactiveDiv').removeClass('show_hide');
            $('.thirdMenuDiv').addClass('show_hide');
            $('#active').removeClass('selected');
            $('#inactive').addClass('selected');
            $('#thirdMenu').removeClass('selected');
        });
        $('#thirdMenu').click(function(){
            $('.activeDiv').addClass('show_hide');
            $('.inactiveDiv').addClass('show_hide');
            $('.thirdMenuDiv').removeClass('show_hide');
            $('#active').removeClass('selected');
            $('#inactive').removeClass('selected');
            $('#thirdMenu').addClass('selected');
        });

    });
});

Answer 1

不要嵌套您的点击处理程序!摆脱这个包罗万象的处理程序，你就准备好了。 fiddle :http://jsfiddle.net/tymeJV/HZ4CZ/2/

取消此处理程序:$('ul#chooseType li a').click(function(e) {

它之所以有效，是因为您的点击处理程序实际上都没有在页面加载时绑定(bind)，它们在初始点击后绑定(bind)。