foreach 不在事件 js 中执行

Question

有两个简单的 html，点击第一个 html 中的任何 href，重定向到第二个 html 并对 class 的所有对象做一些事情 'clazz':

第一个html:

<body>
<a class="link" id="1" href="display.html" >flower 1</a>
<a class="link" id="2" href="display.html" >flower 2</a>
<script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript"></script>
<script src="js/script.js"></script>
</body>

第二个：

  <body> 
  <img class ="clazz" id="1" src="https://">
  <img class ="clazz" id="2" src="https://">
  <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
  <script src="js/script.js"></script>
</body>

js:

 $(document).ready(function() {
    $('.link').on('click', function( event ) 
     {
         $(".clazz").each(function() {
           alert("hey");
         });
     });
 });

虽然代码很简单，但是还是发生了一些奇怪的事情.. 永远不会调用 clazz 上的 .each 。将 .each 部分移出 link.onClick 时 - 它会显示警报，因此我认为问题不是 js 中第二个 html 的未识别 class 'clazz'。还能是什么？

Answer 1

如果您只想在 link 上执行您的代码，而不是默认的 link 操作（即 'going to another page'），您需要添加一行代码 - 调用至 preventDefault().

$('.link').on('click', function( event ) 
 {
    event.preventDefault();
    // your other code
 });

https://api.jquery.com/event.preventdefault/

Answer 2

即使您在 html 中有相同的 javascript 文件 js/script.js。每个 page/html 请求将以不同方式调用每个 javascript 文件。

在你的第一个 html 你有 a.link 将在 click 上调用，但没有 a.class。

 `a.class === undefined`  //in your 1st html

第二个html 你有 a.class 但你没有 a.link。所以您在第二个 html 中的 javascript 无法在 a.link.

上注册 click 事件

`a.link === undefined`    //in your 2nd html

foreach 不在事件 js 中执行

foreach not executing inside event js

javascript

each