foreach not executing inside event js

Question

Having two simple htmls, on click of any href in first html, redirect to second html and do something on all obj of class 'clazz':

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

second:

  <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");
         });
     });
 });

Although the code is simple, something weird happens.. The .each on clazz is never invoked. When moving the .each section out of link.onClick - it shows the alerts so I assume the problem is not unrecognized class 'clazz' of the second html in the js. What else could it be?

try removing the `href` attribute from the `a` element. maybe you get redirected before the event fires — NtFreX, Nov 26 '16 at 22:45
You can't execute javascript across a page load. When you navigate, all javascript is terminated. Also, "clazz" probably is invoked, but there are no elements with that class on the page it would be invoked on. — Ouroborus, Nov 26 '16 at 22:46
so I guess the js should be executed after the redirection to the second page,so that it recognizes its elements including the clazz. having the js included at the *end* of body in second html doesn't provide this? — pomme, Nov 27 '16 at 08:21

score 1 · Answer 1 · edited Nov 26 '16 at 23:19

1

If you want to only execute your code on link click instead of the default link action (which is 'going to another page') you need to add one line of code - a call to preventDefault().

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

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

edited Nov 26 '16 at 23:19

Ouroborus

16,237
4
39
62

answered Nov 26 '16 at 22:57

user44

682
7
20

score 1 · Accepted Answer · edited Nov 06 '17 at 11:28

1

Even though you have the same javascript file js/script.js in both html. each page/html request will call each javascript file differently.

In your first html you have a.link which will be invoked on click but don't have a.class.

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

In the second html you have a.class but you do not have a.link. So your javascript in the second html is unable to register click event on a.link.

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

edited Nov 06 '17 at 11:28

Xyz

5,955
5
40
58

answered Nov 26 '16 at 23:19

RizkiDPrast

1,695
1
14
21

so there is no way to manage elements of second html (hide and show for example) on event fired from elements of first page? – pomme Nov 27 '16 at 08:11
one of the common method is to use parameter query. Please review this one [so](http://stackoverflow.com/a/901144/5929494). it is something like from your 1st html. you can pass paramer like this `href="display.html?yourKey=yourValue"`. Then in 2nd html try to extrach those value from javascript `location.search`, get the value and do whatever you want in 2nd html – RizkiDPrast Nov 27 '16 at 09:40
awesome, but if the js is not executed across the page load, it would never execute the location.search in the right time- once the 2d html is completely loaded.. where should this search be placed to insure its execution on right time? – pomme Nov 27 '16 at 10:41
correct it is not executed accross the page load. Thats why most tutorial will suggest you to separate between 'global code' and 'individual code'. For this purposes I'll recommend you to separate your `JS file` for each html1 and html2. The main function in your `js2` is to get parameter from url (which is coming from html1) – RizkiDPrast Nov 27 '16 at 10:47

foreach not executing inside event js

2 Answers2