load another html page in Jquery, when click event happens on iframe element

Question

Please excuse me i have a very basic question as i am still getting hands on Jquery. I am trying to load another .html page on click of any figure element in this .html page but script tag is not working as expected can anyone help with the below js

html code:

$(document).ready(function(){
 
 $("figure").click(function(){  
  
$(this).load("singlevideo.html"); 
 }); 
});

 

* {
 padding:0px;
 margin:0px;
}


body {
   margin:0;
   padding:0;
   height:100%;
}

header {
   background: green;
  color: white;
  padding: 8px 0px 6px 40px;
  height: 50px;
     
}

.navbar.navbar-inverse.navbar-fixed-top {
  background-color: green; /* fallback color, place your own */
   font-weight: 400;
 color: white;
 text-decoration: none;

}

header h1 {
 display: inline;
 font-family: 'Oswald',sans-serif;
 font-weight: 400;
 font-size: 32px;
 float: left;
 margin-top: 0px;
 margin-right: 10px;
 
 }

nav ul{
  display: inline;
 padding: 0px;
float: left;
}

nav ul li{
 display: inline-block;
 list-style-type:none;
 color: white;
 float: left;
 margin-left: 15px;
 }

nav ul li a{
 color: white;
 text-decoration: none;
 
 }

#nav {
 font-family: 'Montserrat', sans-serif;
 position: fixed;
}

.homered{
 background-color: red;
 padding: 30px 10px 30px 10px;
 
}



.homeblack:hover{
 background-color: blue;
 padding: 30px 10px 30px 10px;
}
div{
 width:250px;
 height:666px;
 background:#1A8DA9;
}
div a{
 text-decoration:none;
 color:white;
 padding:20px;
 padding-right:100px
}
div ul li{
 list-style-type:none;
 display:block;
 padding :15px;
 border-bottom:1px solid #236D7F;
 }
 div ul li :hover{
  background:#4097AD;
  transition:linear all 0.40s;
  margin-left:10px;
 }
 div ul li a:hover{
  color:black;
 }
  #navBar {
   float: left;
   position: fixed;
 }
 
 #nav {
 float: right;
}

#maincontent{
width: 80%;
    height: auto;
    outline: 1px solid;
    position: absolute;
    right: 0;
    background: white;

}



figure {
    display: inline-block;    
}

}
figure figcaption {    
    text-align: center;
}

iframe:focus { 
    outline: none;
}

iframe[seamless] { 
    display: block;
}

.footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:green;
  text-align: center;
}

<!DOCTYPE HTML>
<html lang = "en">
  <head>
  <title>Videos</title>
      <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="videos.css">
  </head>
  <body>
  
 
   <header>
  <nav class="navbar navbar-inverse navbar-fixed-top">
  <h1> Main logo </h1>
   <ul id="nav"> 
    <li><a class="homeblack" href="index.html">Home</a></li>
    <li><a class="homered" href="videos.html">Videos</a></li>
    <li><a class="homeblack" href="news.html">News</a></li>
    <li><a class="homeblack" href="contactus.html">Contactus</a></li>
 </ul>
 </nav>
 </header>

 <div id="navBar">
<ul>
 <li><a href="#">video </a></li>
 <li><a href="#">video </a></li>
 <li><a href="#">video </a></li>
 <li><a href="#">video </a></li>
</ul>
</div>

<div id="maincontent">
<figure  id="1">
  <iframe width="300" height="240" src="https://www.youtube.com/embed/VORxzZazSnc" frameborder="0" allowfullscreen></iframe>
  <figcaption> Trailer </figcaption>
</figure>
<figure id="2">
<iframe width="300" height="240" src="https://www.youtube.com/embed/VORxzZazSnc" frameborder="0" allowfullscreen></iframe> 
  <figcaption> Trailer</figcaption>
</figure>
<figure id="3">
<iframe width="300" height="240" src="https://www.youtube.com/embed/_fL4RuPcDw4" frameborder="0" allowfullscreen></iframe> 
  <figcaption> trailer </figcaption>
</figure>
<figure id="4">
<iframe width="300" height="240" src="https://www.youtube.com/embed/7yxNzMhXSr4" frameborder="0" allowfullscreen></iframe>
  <figcaption> trailer </figcaption>
</figure>
<figure id="5">
<iframe width="300" height="240" src="https://www.youtube.com/embed/ljuBWvzZtyc" frameborder="0" allowfullscreen></iframe> 
  <figcaption> trailer</figcaption>
</figure>
<figure id="6">
<iframe width="300" height="240" src="https://www.youtube.com/embed/2ZBHa9gIOp4" frameborder="0" allowfullscreen></iframe>
  <figcaption>Trailer</figcaption>
</figure>
</div>
<div class="footer">      
<p style="color:white; font-size:20px; font-weight:bold;">Copyright &copy; Education Students</p>
</div>
 <!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   
  </body>
</html>

Possible duplicate of [How to redirect to another webpage in JavaScript/jQuery?](https://stackoverflow.com/questions/503093/how-to-redirect-to-another-webpage-in-javascript-jquery) — H77, Jul 11 '17 at 07:59
Check that you receive `click` event. It's possible, that you click on `iFrame` and event is trapped in it's DOM tree. — Justinas, Jul 11 '17 at 08:01
Posible duplicate of [Load Content of a div on another page](https://stackoverflow.com/questions/4101770/load-content-of-a-div-on-another-page) — Nicholas, Jul 11 '17 at 08:03
`load` function makes an Ajax call to retreive the page not to load the page in the browser. you should take a look to the first comment. — ADreNaLiNe-DJ, Jul 11 '17 at 08:03
Oh, wait, are you wanting a redirect?? Not just replace the contents of a page?? — treyBake, Jul 11 '17 at 16:02
@ThisGuyHasTwoThumbs : what i want to do is on click of any figure element the youtube video in that iframe, should enlarge to 75% wide with below comment form which i have put in another html page. So when i click on figure element it should load another html page created. — Hara, Jul 12 '17 at 10:43
@Haraharamahadev ah then my answer should be what you're looking for :) — treyBake, Jul 12 '17 at 10:45

treyBake · Answer 1 · 2017-07-13T15:51:04.923

1

you can make use of the .load function, not to be confused with the load event handler.

.load() can be used to load data to an element - here's a reference http://api.jquery.com/load/

here's a basic example of how to use, the code is not like yours, it's just a template for you to use :)

html:

<button id="clickMe" type="button">Click Me</button>
<div id="targetLoad"></div>

jQuery:

$('#clickMe').on('click', function()
{
    $('#targetLoad').load('path/to/html.html')
});

this will load html.html into the div with the id of targetLoad.

Your issue with your .on() function is that you use a single world, instead of a class or id. To target an id use # and for classes use .

update 1

didn't realise fully this was for an iframe - the problem with this is, because it's a dynamic element that isn't technically part of the DOM, the event won't fire, or at least shouldn't. But you can use the below to target dynamic elements:

$(document).on('click', '.myDynamicElement', function() {})

and this applies the click action on document where the target has a class of myDynamicElement, which is how you get around working with dynamic elements.

To target your iframe though, it might be better to use .find() as the iframe is it's own entity in a way. The above might work for it, but I reckon this should work

var element = $(document).find('.myIframe').find('figure');

$(document).on('click', element, function() {});

update 2 - req from OP in comments below

Example of how to use dynamic event handling:

$('body').on('change', '.myDropdown', function()
{
    alert($(this).val())
})

in this case, every change to an input that has a class of .myDropdown, then alert the current value of it.

edited Jul 13 '17 at 15:51

answered Jul 11 '17 at 09:32

treyBake

6,440
6
26
57

i have changed JS like this, but still nothing happenning when i click on any id element $(document).ready(function(){ $("#id").on('click',(function(){ $("#singlee").load("C:/Users/rajathkumar_r/Desktop/stack/singlevideo.html"); })); }); i want to display id with singlee on another page when click on any id in the present page. – Hara Jul 13 '17 at 05:39
put a console.log around it and see what it returns - it should work :S – treyBake Jul 13 '17 at 08:32
i am trying to put like this but not able to see in console $(document).ready(function(){ $("#id").on('click',(function(){ console.log('#id'); $("#singlee").load("C:/Users/rajathkumar_r/Desktop/stack/singlevideo.html"); })); }); – Hara Jul 13 '17 at 09:26
ok that's interesting, maybe chuck `alert('something')` inside the `.on('click')` function to see if it's actually being triggered – treyBake Jul 13 '17 at 09:27
it is working , but i need an event on click on the iframe, the iframe is inside figure element $(document).ready(function(){ $("figure").on('click',(function(){ alert("clicked.") })); }); – Hara Jul 13 '17 at 09:34
try using dynamic event binding - I'll update my answer :) – treyBake Jul 13 '17 at 09:35
can you please provide me an example how to use dynamic event binding – Hara Jul 13 '17 at 15:49
@Haraharamahadev yeahsure :)( – treyBake Jul 13 '17 at 15:49
i am trying like this.. $(document).on('click', '.iclass', function() { alert("clicked"); $("#singlee").load("C:/Users/rajathkumar_r/Desktop/stack/singlevideo.html"); }); but not working. – Hara Jul 13 '17 at 16:07
I tried all options, it is not possible to get click event on iframe, can anyone confirm on this. – Hara Jul 15 '17 at 02:54

score 0 · Answer 2 · answered Jul 11 '17 at 09:29

0

You are just embedding a youtube video to your frame, so click event on youtube page will always work for video functions of youtube and your java script click event is working on the name "Trailer" of your page. Just click on the name "trailer" and check it is working.

Instead of embedding a youtube video just have the preview and url of the video and have a click event on the url to load that video on separate page as u expected.

answered Jul 11 '17 at 09:29

Rajesh Kumaresan

57
5

is it not possible to get click event in iframe element – Hara Jul 15 '17 at 03:49
Your click event is working. I mentioned in my answer. your java script click event is working on the name "Trailer" of your page. Just click on the name "trailer" and check it is working. – Rajesh Kumaresan Jul 16 '17 at 04:14
i know it is working, but i want click event on the iframe. click event on iframe is not working, I tried searching all means and came up that click event doesnot work on iframe and we need to use some different approach. What i am trying to achieve is show few videos in the main content div and when user clicks on any video that video should open in a new page with width: 1000px;height: 500px; below i have to put forms for comment. How to achieve it without iframe. – Hara Jul 16 '17 at 05:30
u can use html table with video tag like below instead of iframe and once user click on it load bootstrap modal to load videos. – Rajesh Kumaresan Jul 19 '17 at 07:21

load another html page in Jquery, when click event happens on iframe element

2 Answers2

update 1

update 2 - req from OP in comments below