簡體   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