Question

好的所以我是Jquery的新手，有这个简单的脚本来点击2个链接'预览'div中的图像

<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>

在Firefox和Opera中运行良好。但是，IE会在点击图片路径时打开一个新窗口（www.mysite.com/images/pic1.png）。

我知道这是IE行为而不是jquery错误..但是有一个简单的解决方法适合所有浏览器吗？

Answer 1

试试这个：

1 - 替换此行：

$('a.classname').click(function(){

这一个：

$('a.classname').click(function(event){

2 - 替换此行：

return false;

这一个：

event.preventDefault();

让我知道它是否有效，我会告诉你这里发生了什么：）

Answer 2

请测试

$(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

Jquery相关的IE bug属性

2 个答案: