Question

I have a jQuery select which works in most browsers axcept IE. The code is as follows;

<script type="text/javascript">
        function parseCatSelect()
        {
            $('#d_cat select:empty').parent().html('<p><span class="placeholder">No categories available</span></p>');
            $('#d_cat select').attr('name', 'e');
        }

        function loadCategories()
        {
            $('#d_cat').html('<p><span class="placeholder">Please wait&hellip;</span></p>').load('/brand_categories.asp', {label: $('#d_brand select option:selected').val()}, parseCatSelect);
        }

    $('#d_brand').load(
        '/brands.asp',
        function() {
            $('#d_brand select').attr('name', 'd').live('change', loadCategories).trigger('change');
        }
    );

</script>

Could anyone help with a solution for this issue please? You can see this live (in FireFox) at http://www.wearecapital.com

Thank you.

Answer 1

I’d change this:

.live('change', loadCategories)

To this:

.change(loadCategories)

You’re rebinding after the ajax load anyway, so .live() isn’t giving you much here…and I’ve had plenty of problems in corner cases, change still doesn’t bubble completely correctly in IE.

By default it doesn’t bubble at all, jQuery is doing some magic here to bubble the event, but it’s not perfect yet. Also note that it didn’t bubble at all in IE (even via jQuery) until 1.4+, you’re on 1.3.2 looking at the page, so .live() wouldn’t work with change in IE at all.