jQuery .click(function() not working in IE7

Question

Ok, I've looked through all the questions regarding this and I've tried several of the suggestions to no avail, so I'm hoping someone can shed more light on my problem.

OUTLINE OF THE ISSUE:

I'm running two Nivo sliders in a tabbed box. The code I have works in all the normal browsers, but some reason IE7 doesn't like the code I have and won't register the .click(function(e) when the tab is selected.

HERE IS THE CODE:

Part 1 - this loads the slider gallery on page load on the first tab:

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

Part 2 - this is one IE7 has an issue with. This is for the other tabs so the gallery won't load until the tab is clicked. For some reason IE7 doesn't like this:

<script type="text/javascript">
$(document).ready(function(){
    $('#gallery3-link').click(function(e){ 
        $('#gallery1').nivoSlider();
         return false; 
    });
});
</script>

THIS IS WHAT I'VE TRIED SO FAR:

I've tried using the $("#ClickMe").live('click', function() which didn't work as well as the $("body").delegate("p", "click", function() which were the two main solutions I saw people using to get this to work in IE7. When I was debugging I also set an alert to make sure IE was registering the click function:

    $('#target').click(function() {
  alert('Handler for .click() called.');
});

This had no effect. When you clicked on the tab, it didn't alert which confirmed the click function wasn't working. I've spent quite a while digging around for a solution to this and am plum out of resources. I thought it might something with the code, or some other work around - most of the sites I referenced were from circa 2006 or 2007. Not that JS has changed that much, but I was hoping maybe someone found a simplier solution in the last 4 years.

any help would greatly be appreciated.

D

Answer 1

Without seeing what you're actually working with, possibly you could try preventDefault() instead of return false;

<script type="text/javascript">
$(document).ready(function(){
    $('#gallery3-link').click(function(e){ 
        e.preventDefault();
        $('#gallery1').nivoSlider();
    });
});
</script>

Answer 2

I am guessing it is an error before that, that is causing the issue. Are there any errors on the page? Have you tried putting a simple alert('test') where the click function is set? If so, does it work?

EDIT:

From the other things you reference which I see when I did a search is the person was using IETester and it worked fine in regular IE7 and IE8. Are you using a real version of IE7?

Answer 3

The best solution I found was to simply load all the galleries on page load using the:

<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>

It does add some time to the page load time - just about a 1/2 second more, but it solves the problem in IE7.

Thanks for everybody's help in this.

D

Answer 4

I just ran into this same bug, none of the other answers here were satisfactory. I solved this myself by using

$('body').click(function() { ... });