从jQuery实例获取元素：

Question

编辑：我已经修好了。我在采购jQuery时犯了一个错误。一旦我将src属性更改为 https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js，它有效。多谢你们！我想阻止链接将用户带到另一个页面。当我尝试用getElementById（＆＃34; id＆＃34;）选择元素时，它工作正常。但是，当我尝试使用$（＆＃34;＃id＆＃34;）进行选择时，它不起作用。为了澄清，这有效： https://jsfiddle.net/1nwaptL9/

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

我意识到这两个小提琴确实有效，但是当我在Chrome中加载HTML文件时，带有jQuery选择的那个并不起作用。由于下面包含的源代码在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>

Answer 1

jQuery创建一个jQuery实例，如果你想要实际的DOM元素，你可以执行以下操作：

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

或者，继续使用jQuery添加事件：

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

从jQuery实例获取元素：

＆＃13;

var link = $("#preventlink")[0];
link.addEventListener("click", function(e) {
  e.preventDefault()
}, false);

＆＃13;

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

＆＃13;

坚持使用jQuery：

＆＃13;

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

＆＃13;

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

＆＃13;

请参阅有关主题的jQuery's doc

Answer 2

这是因为addEventListener是一个javascript函数。它没有为jquery定义。对于jquery，您可以使用bind函数。以下是示例代码

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

Answer 3

您正在将jQuery与vanilla JS混合使用：

$("#id") - jQuery

document.getElementById("id") - Vanilla JS

尝试使用其中任何一个。

<强> jQuery的：

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

Vanilla JS：

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

Answer 4

试试这个：

require 'benchmark/ips'
require_relative 'config/environment'

Benchmark.ips do |bm|
  bm.report('left_outer_joins') do
    Foo.left_outer_joins(:bars).where(bars: { foo_id: nil })
  end

  bm.report('where.not') do
    Foo.where.not(id: Bar.pluck(:foo_id).uniq)
  end

  bm.compare!
end

Warming up --------------------------------------
    left_outer_joins     1.143k i/100ms
           where.not     6.000  i/100ms
Calculating -------------------------------------
    left_outer_joins     13.659k (± 9.0%) i/s -     68.580k in   5.071807s
           where.not     70.856  (± 9.9%) i/s -    354.000  in   5.057443s

Comparison:
    left_outer_joins:    13659.3 i/s
           where.not:       70.9 i/s - 192.77x  slower

Answer 5

这是一种更好的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>

无法使用jQuery选择元素

5 个答案:

从jQuery实例获取元素：

坚持使用jQuery：