0

i have following problem: i am trying to load a different html file into a div in my index.html. well it works fine for some links, but for other links (those which get opened in the div) this is not the case. code follows:

first html

<!DOCTYPE html>
<html>
    (...)
    <body>
        <div id="header">
            <ul style="text-align: center; font-size: 16px; text-shadow: 1px 1px black; color: red;">
                <li id="home"><a href="#" id="load_home"><p>HOME</p></a></li>
                <li id="media"><p>MEDIA</p>
                    <ul>
                        <li><a href="#" id="load_test">media</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div id="mainbox">
            <!--CONTENT IS DISPLAYED HERE-->
        </div>
    </body>
</html>

then both sites which can be loaded atm:

<p style="color: azure; text-shadow: 1px 1px black;"><a href="#" id="load_home">load home</a></p>

<p style="color: azure; text-shadow: 1px 1px black;"><a href="#" id="load_test">load test</a></p>

and finaly my jquery:

   $("#load_home").on("click", function(){
       $("#mainbox").load("home.html");
   });
   $("#load_test").on("click", function(){
       $("#mainbox").load("testcontent.html");
   });

well to sum it up: i have a div box in my main file, which is empty and has the id "mainbox". this "mainbox" shouldn't stay empty. i want to fill it with content and all links outside "mainbox" can fill it up, but if i have a link inside my "mainbox" and i click on it, nothing happens. it can link to external sitest like google, but not to html files, which should "erase" mainbox' content and fill it with new...

A1asd
  • 13
  • 5
  • the home and media links work great... only links in div are making problems. – A1asd Jan 04 '15 at 01:02
  • Your script would work only on the parent window and not on any newly loaded windows or frames; so if you click on links within the newly loaded `home.html` and `testcontent.html` windows, they would not be affected by JavaScript. – Cedric Ipkiss Jan 04 '15 at 01:07
  • Is it necessary to load complete html pages, especially given they don't have a lot of content? Sometimes extracting the necessary html and inserting would save you many complications. – Cedric Ipkiss Jan 04 '15 at 01:12
  • i cant think of another solution. is it possible to get those links working, without throwing the concept around? – A1asd Jan 04 '15 at 01:13
  • @che-azeh there is no complication... the events can be delegated – charlietfl Jan 04 '15 at 01:16
  • @che-azeh there is no iframe... you are really making it more complicated on OP than necessary. `load()` is an ajax method – charlietfl Jan 04 '15 at 01:18
  • Take a look at this thread: [jQuery .load() / .ajax() not executing javascript in returned HTML after appended](http://stackoverflow.com/questions/16352371/jquery-load-ajax-not-executing-javascript-in-returned-html-after-appende) – Cedric Ipkiss Jan 04 '15 at 01:39

1 Answers1

1

you can delegate the events for elements that will be loaded into the DOM using ajax.

It's not clear however what you expect these links to do.

/* create a click handler for all current or future <a> within id=mainbox*/
$("#mainbox").on("click",'a', function(e){
    e.preventDefault();
    alert( this.href);/* no sure what you want them to do here */
});
charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • hey. thank you for the answer. but im afraid to say, that i dont understand, what this code does. i also tried to add it do my script.js file but still no win with load_test – A1asd Jan 04 '15 at 01:31
  • Your issue is not well explained. it sounded like you wanted links loaded by ajax to have click handlers applied to them – charlietfl Jan 04 '15 at 01:33
  • Also note that you can't repeat ID's ina page, use class instead – charlietfl Jan 04 '15 at 01:37
  • im sry. well to sum it up: i have a div box in my main file, which is empty and has the id "mainbox". this "mainbox" shouldn't stay empty. i want to fill it with content and all links outside "mainbox" can fill it up, but if i have a link inside my "mainbox" and i click on it, nothing happens. it can link to external sitest like google, but not to html files, which should "erase" mainbox' content and fill it with new... – A1asd Jan 04 '15 at 01:38
  • Nothing in the code you showed would prevent a normal link form working. The code I gave you allows you to bind click hanlders to links that are loaded in the future – charlietfl Jan 04 '15 at 01:39
  • thank you for the help. i found one problem. your tip with using classes was the right one. its working now. thank you very much. – A1asd Jan 04 '15 at 01:44