繁体   English   中英

JQuery函数不会在首次点击时触发,但在所有后续点击中的行为均与预期的一样

[英]JQuery function doesn't fire on first click, but behaves as expected on all subsequent clicks

我只需要选择链接以显示为选定状态并显示所指示的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');
        });

    });
});

不要嵌套您的点击处理程序! 摆脱所有包含的处理程序,一切就绪。 小提琴: http : //jsfiddle.net/tymeJV/HZ4CZ/2/

$('ul#chooseType li a').click(function(e) {这个处理程序: $('ul#chooseType li a').click(function(e) {

之所以有效,是因为您的点击处理程序实际上没有绑定到页面加载上,而是在初次点击之后就绑定了。

您正在安装一个单击处理程序'ul#chooseType li a' ,该单击处理程序将在单击时安装其他单击处理程序。 只需删除它,它应该可以工作: http : //jsfiddle.net/HZ4CZ/12/

将类display添加到用于显示选项卡内容的所有DIV。 然后使用如下的DRY代码:

$(document).ready(function() {
    $('ul#chooseType li a').click(function(e) {  
        $('ul#chooseType li a').removeClass('selected');
        $(this).addClass('selected');
        $('.display').addClass('show_hide');
        $('.display.'+this.id+'Div').removeClass('show_hide');
    });
});

小提琴

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM