select 元素不能 jQuery

Question

编辑：我已经修复了它。我在采购 jQuery 时犯了一个错误。一旦我将 src 属性更改为 https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js，成功了。谢谢你们！我想阻止 link 将用户带到另一个页面。当我尝试使用 getElementById("id") select 元素时，它工作正常。但是，当我尝试使用 $("#id") select 时，它不起作用。澄清一下，这有效： https://jsfiddle.net/1nwaptL9/

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

我意识到这两个小提琴确实有效，但是当我在 Chrome 中加载 HTML 文件时，带有 jQuery selection 的那个不起作用不工作。由于我在下面包含的源代码在 JSFiddle 中运行良好，但在 Chrome 中却不行，我怀疑我做错了什么，但 JSFiddle 不处理 links 或类似的东西。任何帮助将不胜感激！

无效的源代码：

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

Answer 1

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

Answer 2

您正在将 jQuery 与 vanilla 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)

Answer 3

试试这个：

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

Answer 4

这里有一个更 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>
 <body>
  <a id="preventlink" href="http://youtube.com"> click here </a>
  <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
 </body>
</html>

Answer 5

这是因为 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>

select 元素不能 jQuery

Can't select elements with jQuery

javascript

jquery

html

hyperlink

preventdefault

从 jQuery 实例获取元素：

坚持 jQuery: