Ok so I'm a newbie in Jquery and have this simple script to 'preview' an image in a div on clicking 2 links
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>开发者_运维问答
<script type='text/javascript'>
$(function(){
$('a.classname').click(function(){
var new_image_src = $(this).attr('href');
var $new_image = $("<img>", {
src: new_image_src,
width: 400,
height: 300,
load: function() {
$('#preview').animate({'opacity': 1}, 'fast');
}
});
$('#preview').animate({'opacity': 0}, 'fast', function(){
$('#preview').empty().append($new_image);
});
return false;
});
});
</script>
.....
<a class="classname" href="images/pic1.png">link 1</a>
<a class="classname" href="images/pic2.png">link 2</a>
Works great in Firefox and Opera . IE however opens a new window on click to the path of the image (www.mysite.com/images/pic1.png).
I've know this is IE behavior and not a jquery bug ..but is there a simple workaround to suit all browsers?
try this:
1- Replace this line :
$('a.classname').click(function(){
with this one:
$('a.classname').click(function(event){
2- Replace this line :
return false;
with this one:
event.preventDefault();
and let me know if it works, and I will tell you what is going on here :)
test it please
$(function () {
$("a.classname").click(function(event)
{
event.preventDefault();
var new_image_src = $(this).attr('href');
var $new_image = $("<img>", {
src: new_image_src,
width: 400,
height: 300,
load: function() {
$('#preview').animate({'opacity': 1}, 'fast');
}
});
$('#preview').animate({'opacity': 0}, 'fast', function(){
$('#preview').empty().append($new_image);
});
});
};
event.preventDefault() --> Description: If this method is called, the default action of the event will not be triggered.
test it here
精彩评论