change event not firing for checkboxes when tab is changed
<p>I have two tabs one called Sale-Items and the other All-Items and for each tab is an associated div with a list of checkboxes.
The first tab by default that is selected works when i click the checkbox and it alerts when checked or unchecked, but when I click the the other tab Sale-Items and the asscoiated
checkboxes for that tab appear when I check or uncheck the items it doesn't alert or fill the array. Does anyone know how I can solve this problem.
I've commented my code check it out.</p>

<p>JavaScript:</p>

<pre><code>var data = [];    
var tab = '&lt;%= (Request.QueryString["tab"] == null ? "All-Items" : Request.QueryString["tab"]) %&gt;'    

// this function changes the the selected tab but when I click the checkbox 
// associated with the tab it doesn't alert or fill the data array
$('ul.tabs .tab a').click(function (e) {            
    if (!$(this).hasClass('selected')) {
       tab = $(this).attr('href').split('#')[1]; // change the tab here for the checkbox change event
       alert(tab);
       if ($('#' + tab).find(':checkbox').length &gt; 1) {
           $(this).parent().addClass('selected').siblings('li').removeClass('selected');
           $('#filter-tab-categories').show();
           $('#' + tab).show();
           $('.filters-panel').find('.filter-wrapper').not('#' + tab).hide();
           data = [];
           $('#' + tab + ' input:checkbox:checked').each(function () {
               data.push({ 'Name': $(this).val(), 
                        'Count': $(this).parent().siblings('td').find('a span').text()
               });
           });
           // getProducts(data, department, "0", "2", category);
       } else {
           $('#filter-tab-categories').hide();
       }
   }
   $('.console').html(data.join(',').toString());
   e.preventDefault();
});    

// prblem here when I click the tab and then click a checkbox doesn't alert
// but it does for the first tab(default) selected which is All-Items
// so All-Items div always alerts for the associated checkbox not for the selected tab or next tab
$('#' + tab + ' input:checkbox').change(function () {
    alert(tab);
    if ($(this).is(':checked')) {
        data.push({ 'Name': $(this).val(),
            'Count': $(this).parent().siblings('td').find('a span').text()
        });
    } else {
        for (var i = 0; i &lt; data.length; i++) {
            if (data[i].Name == $(this).val()) {
                data.splice(i, 1);
            }
        }
    }
    $('.console').html(data.join(',').toString());

});
</code></pre>

<p>HTML:</p>

<pre><code>&lt;ul class="tabs"&gt;
    &lt;li class="tab"&gt;&lt;a href="#Sale-Items"&gt;Sale Items&lt;/a&gt;&lt;/li&gt;        
    &lt;li class="tab"&gt;&lt;a href="#All-Items"&gt;All Items&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="filters-panel"&gt;
    &lt;span id="LeftNav_lblFilterCategory" class="filters-category"&gt;Filters:
    &lt;span style="color:#0066cc; font-weight:normal"&gt;Desktop Computers&lt;/span&gt;&lt;/span&gt;
    &lt;div id="Sale-Items" class="filter-wrapper" style="display:none"&gt;
        &lt;div class="filter-group"&gt;
            Brand&lt;/div&gt;
        &lt;div class="filter-box"&gt;
            &lt;table border="0" cellpadding="0" cellspacing="0"&gt;
                &lt;tr&gt;
                    &lt;td class="filter"&gt;
                        &lt;input name="filter1" type="checkbox" value="Acer" /&gt;&lt;/td&gt;
                    &lt;td&gt;
                        &lt;a class="filter-name" href="#"&gt;Acer(&lt;span&gt;1&lt;/span&gt;)&lt;/a&gt;&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td class="filter"&gt;
                        &lt;input name="filter2" type="checkbox" value="Compaq" /&gt;&lt;/td&gt;
                    &lt;td&gt;
                        &lt;a class="filter-name" href="#"&gt;Compaq(&lt;span&gt;1&lt;/span&gt;)&lt;/a&gt;&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/table&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="All-Items" class="filter-wrapper" style="display:block"&gt;
        &lt;div class="filter-group"&gt;
            Brand&lt;/div&gt;
        &lt;div class="filter-box"&gt;
            &lt;table border="0" cellpadding="0" cellspacing="0"&gt;
                &lt;tr&gt;
                    &lt;td class="filter"&gt;
                        &lt;input name="filter8" type="checkbox" value="Acer" /&gt;&lt;/td&gt;
                    &lt;td&gt;
                        &lt;a class="filter-name" href="#"&gt;Acer(&lt;span&gt;4&lt;/span&gt;)&lt;/a&gt;&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/table&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
