jQuery live with enabled/disabled buttons

by mmarcon

HTML

<ul>
    <li><a href="#0" id="p0">P0</a></li>
    <li><a href="#1" id="p1" class="disabled">P1</a></li>
    <li><a href="#2" id="p2">P2</a></li>
</ul>

CSS

a {
    display: block;
    width: 30px;
    height: 30px;
    padding: 5px;
    border-radius: 4px;
    text-decoration: none;
    color: #fff;
    background-color: #111;
    font-size: 18px;
    line-height: 30px;
    margin: 10px;
    font-family: helvetica;
    font-weight: 100;
    text-align: center;
}

a.disabled {
    background-color: #ccc;
}

JavaScript

$(function(){
    $('a[class!="disabled"]').live('click', function(){
        alert($(this).text());
    });
    $('#p0').click(function(){
        $('#p1').toggleClass('disabled');
    });
});