javascript/jquery: call function on child element

Question

here is my code:

a.html :

<script>
 $(function(){
  $('#A').load('b.html');
  $('h1').click(function(){
    functionB();
  });
 });
</script>
<html>
 <h1>Title</h1>
 <div id='A'></div>
</html>

and,

b.html :

<script>
  function functionB(){
   alert('funcation B called');
  }
</script>
<p>nothing</p>

seems that I can not call functionB() from root. is there anyway to do? thanks

You would either have to load the b.html (with either Ajax or an IFrame) to be able to access functionB();. Alternatively you could place functionB(); in an External JS File and reference it on both pages. — Nunners
– Nunners, Commented Jan 17, 2014 at 10:36
What you are trying to do is a bad, bad idea. Nunners' suggestion to put the scripts in a separate (javascript) file is the correct one. If you need to run functionB on both pages, then include the script on both pages. There is NEVER a good reason to mix HTML and JS together and 'call a function on another page'. It just means your basic design is wrong. — Sanne Roerdinkholder
– Sanne Roerdinkholder, Commented Jan 17, 2014 at 10:44
@Nunners: Suggest you post your idea as an answer... It is a better way of organising this specific example. Rather than another take credit for your suggestion. — iCollect.it Ltd
– iCollect.it Ltd, Commented Jan 17, 2014 at 10:52

Bhavesh G · Accepted Answer · 2014-01-17 10:47:29Z

1

You should abstract the functionB() function into a separate .js file and include that file on each page:

Any time you have common code, abstract it into a shared component and call that component from the places where it's needed.

answered Jan 17, 2014 at 10:47

Bhavesh G

3,0285 gold badges47 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bhavesh G Over a year ago

its my personal suggestion .

iCollect.it Ltd Over a year ago

In that case: Please give credit to the commenter that suggested this before you :)

Wesleywai Over a year ago

Hi, I found this is working from the test: wesley.com.hk/test2 but donno why do not work on the site I actually working on. I am developing an ajax site with hash natvigation. each inner page has it's own js functions. then, i am going to add a 'on hash change' function so to allow user press 'back' of the browser. so I need to call functions on the inner page so to let it open

Bhavesh G Over a year ago

your code is working in me also; the functionB() is calling in A.html page. are you sure that b.html is as exact as you've mentioned here ?

Wesleywai · Accepted Answer · 2014-01-20 08:11:21Z

0

I found what I've done wrong:

right b.html

<script>
  $('#bContent').ready(function(){
    //do something here
  });
  function functionB(){

    alert('funcation B called');
  }
</script>
<p id='bContent'>nothing</p>

wrong b.html

<script>
  $('#bContent').ready(function(){
    //do something here
    function functionB(){
      alert('funcation B called');
    }
  });
</script>
<p id='bContent'>nothing</p>

Thanks for all your help.

edited Jan 20, 2014 at 8:11

answered Jan 20, 2014 at 3:08

Wesleywai

3251 silver badge12 bronze badges

Collectives™ on Stack Overflow

javascript/jquery: call function on child element

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related