Jquery checkbox and tag creation not working in IE8

mcluff
mcluff used Ask the Experts™
on
Hi Experts,

I have got this code working in all browsers inc ie9 - except for ie8.

Its been driving me mad for over 3 hours now so thought I'd get an extra set of eyes on it.

Please Help

Jquery

if ($('#selected-breeds').children(".tag").length === 0) {
        $('#selected-breeds').hide();
    }

    $('#available-breeds :checkbox').click(function () {
        function selectedBreedFade() {
            if (!$('#selected-breeds').find('a').length) {
                $('#selected-breeds').fadeOut('fast');
            } else {
                $('#selected-breeds').fadeIn('fast');
            }

        }


        if ($(this).is(':checked')) {
            var checkedBreed = $(this).parent().next('td').find('label').text();
            $('<a class="tag">&times; <span>'+checkedBreed+'</span>').appendTo('#selected-breeds');
            selectedBreedFade();
        } else {
            var uncheckedBreed = $(this).parent().next('td').find('label').text();
            $('#selected-breeds').find('.tag span:contains(' + uncheckedBreed + ')').parent().fadeOut('fast').remove();
            selectedBreedFade();
        }

        $('#selected-breeds .tag').click(function () {
            var removedBreed = $(this).find('span').text();
            $(this).fadeOut('fast').remove();
            $('#available-breeds').find('label:contains(' + removedBreed + ')').parent().prev('td').find(':checkbox').attr('checked', false);
            selectedBreedFade()
        });

        $('#button-reset-search').click(function () {
            $('#selected-breeds').fadeOut();
            $('#selected-breeds').find('.tag').remove();
            $('#available-breeds :checkbox').prop('checked', false);
        });

    });

Open in new window


Html

<table id="available-breeds">
              <tbody>
                                   <tr><td><input type="checkbox" name="Breed" value="AA" /></td><td><label>Aberdeen Angus (AA)</label></td></tr>
                   <tr><td><input type="checkbox" name="Breed" value="AAX" /></td><td><label>Aberdeen Angus Cross (AAX)</label></td></tr>
                   <tr><td><input type="checkbox" name="Breed" value="AR" /></td><td><label>Angler Rotvieh (AR)</label></td></tr>
                   <tr><td><input type="checkbox" name="Breed" value="ARX" /></td><td><label>Angler Rotvieh Cross (ARX)</label></td></tr>
                   <tr><td><input type="checkbox" name="Breed" value="AN" /></td><td><label>Ankole (AN)</label></td></tr>
                   <tr><td><input type="checkbox" name="Breed" value="AM" /></td><td><label>Armoricaine (AM)</label></td></tr>
                   <tr><td><input type="checkbox" name="Breed" value="AMX" /></td><td><label>Armoricaine Cross (AMX)</label></td></tr>
                   <tr><td><input type="checkbox" name="Breed" value="AU" /></td><td><label>Aubrac (AU)</label></td></tr>
                   <tr><td><input type="checkbox" name="Breed" value="AUX" /></td><td><label>Aubrac Cross (AUX)</label></td></tr>
                   <tr><td><input type="checkbox" name="Breed" value="ALL" /></td><td><label>Australian Lowline (ALL)</label></td></tr>
                   <tr><td><input type="checkbox" name="Breed" value="AY" /></td><td><label>Ayrshire (AY)</label></td></tr>
                   <tr><td><input type="checkbox" name="Breed" value="AYX" /></td><td><label>Ayrshire Cross (AYX)</label></td></tr>
                              
</tbody>
              </table>
           

<div id="selected-breeds" class="form-row">
  <span class="form-title">Selected Breeds</span>
  <!-- Selected Breeds -->
</div>

Open in new window


Many thanks in advance
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
It seems to be choking on the line where you add the <a> to selected-breeds.

Try this instead
        // ... to line 18
        if ($(this).is(':checked')) {
            var checkedBreed = $(this).parent().next('td').find('label').text();
            // USE THIS LINE
            $('#selected-breeds').append($('<a/>').addClass('tag').html('&times; <span>'+checkedBreed+'</span>'));
             // INSTEAD OF THIS ONE
             // $('<a class="tag">&times; <span>'+checkedBreed+'</span>').appendTo('#selected-breeds');
            selectedBreedFade();
        } else {
            var uncheckedBreed = $(this).parent().next('td').find('label').text();
            $('#selected-breeds').find('.tag span:contains(' + uncheckedBreed + ')').parent().fadeOut('fast').remove();
            selectedBreedFade();
        }
        // .....

Open in new window

Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
Are you using jquery 2.x?  That will not support ie8.  You have to use 1.1x

Author

Commented:
I'm using 1.10

The rest of my jquery works - its just this part.

Author

Commented:
Many thanks
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome - thanks for the points.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial