how to make java script run on the element returned by AJAX

Question

My problems is how can I make my java script run on the elements that returned by AJAX. The javascript does not work on the that returned by AJAX. In my script it suppose to pop out a dialog box with "Hello" but its not. How can I make it works or there are another ways for this? Thanks for the advice.

The below is my code...

index.html

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>


        <script type="text/javascript">
            $(document).ready(function() {
                $("#box_1").on("click", function() {
                    alert("Hello!");
                });

                changeDisplay();
            });

            function changeDisplay() {
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }

                else
                {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }

                xmlhttp.onreadystatechange=function()
                {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        document.getElementById("text").innerHTML=xmlhttp.responseText;
                    }

                }
                xmlhttp.open("POST","ajaxHandling.php",true);
                xmlhttp.send();

            };
        </script>    
    </head>
    <body>
        <h1>Ajax Test</h1>
        <div id="text">

        </div>
    </body>
</html>

ajaxHandling.php

<?php
    echo '<div id="box_1" class="box">Click me</div>';
?>

Out of interest is there any reason why you're using vanilla JS for the AJAX when you have jQuery running? — Tom Walters
– Tom Walters, Commented Mar 12, 2013 at 16:09
why don't you use the ajax function provided by jQuery? It allows you to call functions before the ajax request is sent, on success and on complete. api.jquery.com/jQuery.ajax — martincarlin87
– martincarlin87, Commented Mar 12, 2013 at 16:10
Unless you have some prohibition or inability to add JS libs to the page, it's much better to use JQuery, Prototype, or another library that thousands of people have tested, rather than roll your own ajax routines. If you can't add JQuery you should say that in your question :) — Gus
– Gus, Commented Mar 12, 2013 at 16:16
Delegate the click function or re-bind it when the ajax request is successfully returned — Jeff Shaver
– Jeff Shaver, Commented Mar 12, 2013 at 16:26
I am just new in this, so I am sure which ways is better. Thanks a lot for the advise, I will read more on that. — overshadow
– overshadow, Commented Mar 12, 2013 at 16:30

user1850421 · Accepted Answer · 2013-03-12 16:09:44Z

4

A common problem, you need to use the correct on() syntax for future elements by binding it to a parent of the future element that exists at the time the script runs.

$(document).on("click", "#box_1", function() {
    alert("Hello!");
});

I've used document, but using the closest existing parent is better. Example:

$("#wrapper").on("click", "#box_1", function() {
    alert("Hello!");
});

answered Mar 12, 2013 at 16:09

user1850421

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

2 Comments

user1850421 Over a year ago

.on() for future elements is not well explained, or wasn't when I last looked at it.

letiagoalves Over a year ago

There are many articles about delegating events using jQuery. A quick search is better than reposting common problems like these

Fenton · Accepted Answer · 2013-03-12 16:12:46Z

0

My short answer is that you need to bind the click event slightly differently, using jQuery.on:

$('#text').on('click', '#box_1', function() {
    alert('Hello!');
});

This binds the click event dynamically to any item within the #text element (or that is added later to the #text element) that matches your #box_1 selector.

My long answer is that if you are using jQuery, you should also take advantage of its AJAX library rather than roll your own.

$.ajax({
    url: '/ajaxHandling.php',
}).done(function ( data ) {
    $('#text').html(data);
});

answered Mar 12, 2013 at 16:12

Fenton

253k74 gold badges404 silver badges414 bronze badges

Collectives™ on Stack Overflow

how to make java script run on the element returned by AJAX

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related