2017-08-08 154 views
1

編輯:我已修復它。我在購買jQuery時犯了一個錯誤。一旦我改變src屬性爲 https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js,它的工作。多謝你們! 我想阻止鏈接將用戶帶到另一個頁面。 當我嘗試使用getElementById(「id」)選擇元素時,它工作正常。當我嘗試使用$(「#id」)進行選擇時,它不起作用。爲了澄清,這個工作: https://jsfiddle.net/1nwaptL9/無法使用jQuery選擇元素

但這不起作用:https://jsfiddle.net/7vkepm9e/1/

我意識到這兩個小提琴做實際工作,但是當我加載在Chrome中,一個與jQuery選擇器的HTML文件不起作用。由於我在下面包含的源代碼在JSFiddle中工作正常,但在Chrome中沒有,我懷疑我做錯了什麼,但JSFiddle不處理鏈接或類似的東西。任何幫助,將不勝感激!

的源代碼不工作:

<html> 
<body> 
<a id="preventlink" href="http://youtube.com"> click here </a> 
<script src="js/jquery-1.11.3.min.js"> </script> 
</body> 
</html> 

<script> 
var link=$("#preventlink"); 
link.addEventListener("click", function(e) { 
    e.preventDefault()}, false) 

    </script> 
+1

你沒有正確地在您的提琴的jQuery。即使你做了,你也沒有正確使用jQuery。 https://jsfiddle.net/j08691/7vkepm9e/2/ – j08691

回答

5

jQuery的創建一個jQuery的例子,如果你想實際的DOM元素,你可以做到以下幾點:

var link = $("#preventlink")[0]; 

或者,只是不停使用jQuery添加事件:

$("#preventlink") 
    .click(function (e) { 
     e.preventDefault(); 
    }); 

從jQuery實例獲取元素:

var link = $("#preventlink")[0]; 
 
link.addEventListener("click", function(e) { 
 
    e.preventDefault() 
 
}, false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="preventlink" href="http://youtube.com"> click here </a>

只用jQuery的堅持:

$("#preventlink").click(function(e) { 
 
    e.preventDefault() 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="preventlink" href="http://youtube.com"> click here </a>

jQuery's doc關於這個問題

+0

'.click('click''?? – j08691

+1

@ j08691,謝謝!我從OP – KevBot

+0

獲得複製粘貼代碼感謝您的幫助,但是1。你寫的東西沒有用,2.我不知道發生了什麼事,但是現在我沒法在沒有jQuery的情況下使用它。 –

2

你混合Ĵ查詢香草JS:

$("#id") - jQuery的

document.getElementById("id") - 香草JS

嘗試使用它們中的任何一個。

的jQuery:

$("#preventlink").on("click", function(e) { 
    e.preventDefault() 
}) 

香草JS:

var link=document.getElementById("preventlink"); 
    link.addEventListener("click", function(e) { 
    e.preventDefault()}, false) 
1

試試這個:

$("#preventlink").on('click', function (e) 
{ 
    e.preventDefault(); 
}); 
1

這裏是做你正在尋找一個更jQuery的方式

var $link = $("#preventlink"); 
 

 
$link.on("click", function(e) { 
 
    e.preventDefault(); 
 
    alert("link clicked"); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
\t <body> 
 
\t \t <a id="preventlink" href="http://youtube.com"> click here </a> 
 
\t \t <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
\t </body> 
 
</html>

3

這是因爲的addEventListener是一個JavaScript函數。它沒有爲jquery定義。對於jQuery你可以使用綁定功能。下面是示例代碼

$(document).ready(function() { 
 
var link=$("#preventlink"); 
 
link.bind('click', function(e){ 
 
    
 
    e.preventDefault();}) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<html> 
 
<body> 
 
<a id="preventlink" href="http://youtube.com"> click here </a> 
 

 
</body> 
 
</html>