开发者

Jquery related IE bug attribute

开发者 https://www.devze.com 2023-02-21 06:29 出处:网络
Ok so I\'m a newbie in Jquery and have this simple script to \'preview\' an image in a div on clicking 2 links

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

0

精彩评论

暂无评论...
验证码 换一张
取 消