Question

我有以下html /代码在IE中正常工作，但当我点击Chrome中的链接时，没有任何反应。 HTML如下：

<h1 id="pagetitle">Daina - kora dziesmu kr&#257jums</h1>
<div class="frontpage">
<p id="arvilcinu"><a href="">Ar vilci&#326u R&#299ga braucu</a></p>
</div>
<!--***************** Ar Vilcinu *******************-->
<div id="arvilcinudisplay" class="singlesong">
<p><a href="Ar vilcinu riga braucu.pdf">Click here to download PDF file for printing</a></p>
<p><a href="http://www.youtube.com/watch?v=XuRxjjEaJVQ" target="_blank">Click here to watch the video - sung by Daina</a></p>
<p id="back"><a href=""><img src="backbutton.jpg" alt="Back to Main menu" height="40" width="100"></a></p>
</div>

脚本的jquery位如下：

$("#arvilcinu").click(function(){
    $(".frontpage").fadeOut(1000,function(){
        document.getElementById("pagetitle").innerHTML = "Ar vilci&#326u R&#299ga braucu";
        $("#arvilcinudisplay").css("display","block");
    });
});

这个想法是当用户点击链接（id = arvilcinu）时链接淡出，然后显示相关信息。单击Chrome中的链接只会使屏幕闪烁一秒钟，但屏幕上的任何内容都不会更改。

由于

Answer 1

您需要使用preventDefault()删除链接的自然行为并触发您撰写的点击事件，如下所示：

此外，您只能在jQuery中编写代码（无javascript） -

$("#arvilcinu").click(function(e){
     e.preventDefault();
    $(".frontpage").fadeOut(1000,function(){
        $("#pagetitle").html("Ar vilci&#326u R&#299ga braucu");
        $("#arvilcinudisplay").show();
    });
});

Working Demo

Answer 2

这是因为当你点击链接时会发生这两个事件。一个是您的锚标记<a href="" >...，另一个是您的id为arvilcinu的元素上的click事件。锚标记位于<p id="arvilcinu">内部，导致此行为您需要阻止<a>标记的默认行为，这将通过使用
来完成事件的event.preventDefault()功能。

如果调用此方法，则不会触发事件的默认操作。

您的代码应如下所示：

$("#arvilcinu").click(function(e){
     e.preventDefault();
     // rest of you logic on click event
});

Chrome忽略了jquery点击功能

2 个答案: