Home/ Questions/Q 3390816
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T03:44:06+00:00

I have a HTML file that contains only the basic elements (html, head, body,

  • 0

I have a HTML file that contains only the basic elements (html, head, body, …) and I want to fill it up with content stored in an external file (“content.html”) in my case, using JavaScript (and JQuery). I have accomplished that with function $.get(), but I don’t know, how to access the information I got with this function.

For example, I want to throw an alert if a link is clicked. My code looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){

       $.get("content.html", addContent);   // calls addContent

       function addContent(data)            // fills <div id='content'> with content.html
       {
          $("#content").html(data);
          alert('Load was performed.');
       }


       $("a").click(function(event){ // !!!if any link is clicked, throw an alert 
         alert("Link clicked");
         event.preventDefault();
       });

     });
    </script>

</head>

<body>
  <div id="content">
  <!--CONTENT OF content.html WILL BE INSERTED HERE-->
  </div>
</body>
</html>

This is how content.html looks like:

<h1>Band Creator Home</h1>
    <p>Currently following apps are available:</p>
    <ul>
        <li><a href="/bands/">Bands</a></li>
        <li><a href="/instruments/">Instruments</a></li>
        <li><a href="/musicians/">Musicians</a></li>
        <span></span>
    </ul>

Since there is no element in the original HTML, alert “Link clicked” is never thrown. How can I access these elements collected by $.get() ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    AJAX is asynchronous.
    The server only sends a reply some time after the get method finishes.

    Therefore, you end up adding the click handler before addContent is called, before the new elements exist.
    If you add the handler inside addContent, it will work fine, since the new element will have already been added.

    Alternatively, you can use jQuery’s live method to add a handler to all elements that match the selector, no matter when they were created.

    • 0