Delegate Function with load event

Trying to workout how to user delegate with the load event

by leviputna

HTML

<table data-role="table" class="table table-bordered table-striped ajax">
    <thead>
        <tr>
            <th>Table 1</th>
         </tr>
    </thead>
    <tbody>
         <tr>
            <td>
                <code>Hide me... my data-role = table</code>
            </td>
         </tr>
   </tbody>
</table>


<table class="table table-bordered table-striped ajax">
    <thead>
        <tr>
            <th>Table 2</th>
         </tr>
    </thead>
    <tbody>
         <tr>
            <td>
                <code>Don't hide me... my data-role != table</code>
            </td>
         </tr>
   </tbody>
</table>

CSS

.table-bordered {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-collapse: separate;
    border-color: #DDDDDD #DDDDDD #DDDDDD -moz-use-text-color;
    border-radius: 4px 4px 4px 4px;
    border-style: solid solid solid none;
    border-width: 1px 1px 1px 0;
}

.table {
    margin-bottom: 18px;
    width: 100%;
}

table {
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 100%;
}
.table colgroup + thead tr:first-child th, .table colgroup + thead tr:first-child td, .table thead:first-child tr:first-child th, .table thead:first-child tr:first-child td {
    border-top: 0 none;
}

.table thead th {
    vertical-align: bottom;
}

.table-bordered th, .table-bordered td {
    border-left: 1px solid #DDDDDD;
}

.table th {
    font-weight: bold;
}

.table th, .table td {
    border-top: 1px solid #DDDDDD;
    line-height: 18px;
    padding: 8px;
    text-align: left;
    vertical-align: top;
}

JavaScript

$(document).delegate("table[data-role='table']", "load", function() {
    $(this).hide();//test if selection is working
});