[jQuery] Change Event Firing Twice
My problem is that I seem to be having a change even firing twice.
Here are the details....
I have several checkboxes (input type="checkbox") all containing a
class named "metaABOCode". Whenever one is ticked or unticked (hence
the change event), I want to grab some data via a json ajax call to
populate some content. Everything works brilliantly, except for the
fact that it seems as though the code below is being called twice
(resulting in two ajax calls, etc.).
Any ideas/suggestions as to why this is happening? Feel free to let me
know if anything else is of glaringly poor form as well!
Thanks a lot; appreciate any help you might be able to provide.
The code (and using 1.2.6)...
$('.metaABOCode').change(function() {
$('#metaDistributorCodeTable tr.metaDynamic').remove();
if (!$(this).is(':checked')) {
$('#meta_abocode_all').removeAttr('checked');
} else if ($('.metaABOCode:checked').size() == $
('.metaABOCode').size()-1) {
$('#meta_abocode_all').attr('checked','true');
}
var str = '';
$('input.metaABOCode:checked').each(function() {
if ($(this).attr('id').substring(13) != 'all') {
str += $(this).attr('id').substring(13) + "-";
}
});
jQuery.getJSON('/cms/page/meta/distributorcode/' + str,
function(json) {
var html = '';
html += '<tr class="metaDynamic">';
html += '<td><input id="meta_distributor_all"
class="metaDistributorCode clickable" type="checkbox" /></td>';
html += '<td><span style="font-weight:bold;">Select All</span></
td>';
html += '</tr>';
for (var i=0; i<json.length; i++) {
html += '<tr class="metaDynamic">';
html += '<td><input id="meta_distributorcode_' + json[i]
['sp_code'] + '" class="metaDistributorCode clickable"
type="checkbox" /></td>';
html += '<td>' + json[i]['sp_name'] + '</td>';
html += '</tr>';
}
$('#metaDistributorCodeTable').append(html);
});
});