Question

I have some JS on my site that should prevent the following code from reloading the page (as I use AJAX to refresh part of it), but in IE it is always reloading the page. Every other browser is fine.

The JS, as givein in another thread –

$('#attachment-body').delegate("a", "click", function(e){
    e.preventDefault();
});

The links that are still reloading the page (which is within the #attachment-body container) –

<div id="image-navigation">
    <div id="nav-previous" class="nav-previous attachment-nav-previous float-left">
        <p><a id="previous-link" href="<?php echo get_permalink($attachments[$previous_position]->ID); ?>" title="<?php echo esc_attr(get_the_title($attachments[$previous_position]->post_title)); ?>" onclick="set_centre_image(<?php echo $attachments[$previous_position]->ID; ?>, <?php echo $previous_position; ?>)">&laquo; Previous Image</a></p>
    </div>
    <div id="nav-next" class="nav-next attachment-nav-next float-right">
        <p><a id="next-link" href="<?php echo get_permalink($attachments[$next_position]->ID); ?>" title="<?php echo esc_attr(get_the_title($attachments[$next_position]->post_title)); ?>" onclick="set_centre_image(<?php echo $attachments[$next_position]->ID; ?>, <?php echo $next_position; ?>)">Next Image &raquo;</a></p>
    </div>
</div>

When rendered it this is the block of code generated by the above –

<div id="image-navigation">
    <div id="nav-previous" class="nav-previous attachment-nav-previous float-left">
        <p><a id="previous-link" href="http://mydomain.com/firm-news/summer-drinks-at-the-castle/summer-drinks-2011-6/" title="" onclick="set_centre_image(5144, 5)">&laquo; Previous Image</a></p>
    </div>
    <div id="nav-next" class="nav-next attachment-nav-next float-right">
        <p><a id="next-link" href="http://mydomain.com/firm-news/summer-drinks-at-the-castle/summer-drinks-2011-8/" title="" onclick="set_centre_image(5146, 7)">Next Image &raquo;</a></p>
    </div>
</div>

preventDefault() works in IE as I use it in other areas of the site, so I can only think that something in my code is not right.

Thanks.

Answer 1

I think I’ve solved this now…

When a next/previous link in my gallery was clicked, it fired a JS function (using onClick()) that first cleared the div that I ran the preventDefault() agianst. Instead of that, I hid it and it now works.

I’m no expert, but it looks like IE tests for the .delegate(), .live() and click() methods after it fires the function specified inline (meaning that #attachment-body didn’t exist at the point it was checking for it), where as other browsers do it the other way around.