頁面加載，每次某些按鈕運行jQuery的功能被點擊

Question

我有多個列表項ul和我使用jQuery：

1. 計數的列表項數
2. 輸出值與不同的div
3. 更改輸出文本的顏色如果該值大於13

在一個不同的div，我有與類多個按鈕或.delete。毫不奇怪，單擊這些按鈕可添加或刪除列表項。

當頁面加載時，jQuery函數可以很好地工作，但是我想要做的也是每次單擊上述按鈕時都要更新這個計數。

這裏是我現有的代碼：

var totalItems = $('ul#myList li').length; 
    $('#outputText').text(totalItems); 
    if (totalItems > 13) { 
     $('#outputText').css('color','#F0402B'); 
    }; 

什麼我需要添加，使這項工作？我確實看過這個類似問題的答案（Run code once on page load, then every time a button is clicked），但他們似乎沒有幫助。任何幫助將不勝感激！

Answer 1

道歉，如果我失去了一些東西，但基本上：只是將代碼包裝在一個函數中，在頁面加載時調用該函數，並且在處理按鈕上的點擊之後調用該函數。

例如爲：

// The function 
function updateTotalItems() { 
    var totalItems = $('ul#myList li').length; 
    $('#outputText').text(totalItems); 
    if (totalItems > 13) { 
     $('#outputText').css('color','#F0402B'); 
    }; 
} 

// Call on page load 
$(updateTotalItems); 

// Presumably you're setting up click handlers 
$(".add, .delete").click(function() { 
    // Process the add or delete action 

    // Update the total 
    updateTotalItems(); 
}); 

Answer 2

//Keep this function outside of document ready to avoid anonymous function.  
function updateDiv(){ 
var totalItems = $('ul#myList li').length; 
    $('#outputText').text(totalItems); 
    if (totalItems > 13) 
     { 
     $('#outputText').css('color','#F0402B'); 
     } 
    } 

$(document).ready(function() { 
    // do stuff when DOM is ready 
    updateDiv(); 
    $('.delete').click(updateDiv()); 
    $('.add').click(updateDiv()); 
});