動態點擊事件未觸發

我有一個jQuery手機頁面，其中包含許多用作按鈕的圖像。動態點擊事件未觸發

最初加載頁面時，所有圖像都有一類「不活動」。如果我點擊其中一個按鈕，它的類將變爲「活動」，其他所有按鈕從「非活動」變爲「禁用」。如果我離開頁面並直接導航，則1圖像仍然有一類爲「活動」，其餘的仍有一類爲「禁用」。

當我單擊活動按鈕時，它將類從「活動」更改爲「非活動」，並且所有其他按鈕都將類從「禁用」更改爲「不活動」。這使我可以選擇另一個按鈕作爲活動按鈕。

當我點擊之前被禁用但現在處於非活動狀態的按鈕之一時，點擊事件不會觸發。就好像它認爲該類仍然是禁用的，因爲它最初加載頁面時就是這樣。我已經在Firefox中使用Firebug進行了檢查，並且該類已正確設置爲非活動狀態，但仍然表現得好像該類已禁用。

這裏是我的jQuery：

$(document).ready(function() { 

    $('.inactive, .active').on("click", function(){ 
    // Toggle active/inactive class 
    $(this).toggleClass("active inactive"); 

    // Disable if 1 active button, else inactive 
    if($('.active').length == 1) { 
     $('.inactive').toggleClass("inactive disabled"); 
    } else { 
     $('.disabled').toggleClass("disabled inactive"); 
    } 
    }); 

});

和HTML按鈕：

<a class="button inactive"></a><br /> 
<a class="button inactive"></a><br /> 
<a class="button inactive"></a><br /> 
<a class="button inactive"></a><br /> 
<a class="button inactive"></a><br /> 
<a class="button inactive"></a>

及其類別：

.button { 
    background:url("../images/compare.png") no-repeat; 
    width: 18px; 
    height:18px 
} 
.active { 
    background-position: 0 -18px; 
    cursor:pointer 
} 
.inactive { 
    background-position: 0 0; 
    cursor:pointer 
} 
.disabled { 
    background-position: 0 -36px; 
    cursor:default 
}

來源

2012-10-21 Damian

玉傢伙，我已經想通了這一點。

當我從禁用類更改爲不活動時，點擊處理程序不會自動附加到「新」非活動按鈕。

我已經爲所有按鈕添加了一個新類'mybutton'（例如，一個活動按鈕將是class =「mybutton active」），然後在click處理程序中查找該類，以便即使禁用按鈕通過代碼運行。

這是我的新代碼：

$(document).ready(function() { 

    $('.mybutton').on("click", function(){ 
    if($(this).hasClass("inactive") || $(this).hasClass("active")) { 
     $(this).toggleClass("active inactive"); 
    } 

    // Disable if 1 active button, else inactive 
    if($('.active').length == 1) { 
     $('.inactive').toggleClass("inactive disabled"); 
    } else { 
     $('.disabled').toggleClass("disabled inactive"); 
    } 
    }); 

});

我不得不換行$（本）.toggleClass（「有效無效」）;在一個if語句中的陳述讓我感到困惑。

沒有if語句，單擊禁用的按鈕會將其變爲活動狀態。爲什麼會發生這種情況？爲什麼在if語句中包裝按鈕會修復它，因爲它只是檢查與切換相同的類？

來源

2012-10-22 07:14:59 Damian

動態點擊事件未觸發

回答

相關問題