JQuery Loading Dynamic Content off Dynamic Content

Question

I was wondering if someone would be able to help or point me in a direction. I am looking to make a web application like a quiz. What I need is to be able to load dynamic content off a dynamical created button or href in this case that will link to the other content. So far it doesnt seem to be functioning in that i get a page not found every time i click the button. doesnt seem to be passing the .php through the name. I have tested this outside of the dynmaic content div and it works fine but i really need it to work inside. What I have so far:

index.php

<body>
<div class="container_12">

    <div id="content">
    <!--dynamic content loads here-->
    </div>
</div>  

</body>

Login.php

<h1> Login Page </h1>
    <p> this is a test to c if works </p> 
        <a href='Suitable'>Hello</a> <!--button that doesnt work-->

general.js

$(document).ready(function() {

//initial
    $('#content').load('Login.php');

    //Handle widget Clicks 
    $('div#content a').click(function() {
        var page = $(this).attr('href');
        $('#content').load('pages/' + page +'.php');
        return false;

    });
});

Suitable.php

<h1> Working </h1>
<!-- content thats not loading off button-->

Ram · Accepted Answer · 2012-07-21 04:20:52Z

2

you should delegate the click event for dynamically loaded elements, try the following:

$('#content').on('click', 'a', function(e) {
    e.preventDefault()
    var page = $(this).attr('href');
    $('#content').load('pages/' + page +'.php');
});

answered Jul 21, 2012 at 4:20

Ram

145k16 gold badges174 silver badges201 bronze badges

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

Comments

Majid Fouladpour · Accepted Answer · 2012-07-21 04:33:01Z

0

$(document).ready(function() {

    //initial
    $('#content').load('Login.php', function(){
        //Handle widget Clicks 
        $('div#content a').click(function() {
            var page = $(this).attr('href');
            $('#content').load('pages/' + page +'.php');
            return false;

        });

    });

});

Explanation:

load is asynchronous. JS engine does not wait for it to complete before it goes to the next line. The result is that when your click binding executes there is no a in div#content, so the selector returns an empty array and no binding happens.

edited Jul 21, 2012 at 4:33

answered Jul 21, 2012 at 4:25

Majid Fouladpour

30.4k21 gold badges80 silver badges129 bronze badges

Comments

Pathik Gandhi · Accepted Answer · 2012-07-21 04:18:00Z

-1

Try Live instead of click

//Handle widget Clicks

$('div#content a').live('click',function() {
    var page = $(this).attr('href');
    $('#content').load('pages/' + page +'.php');
    return false;

});

answered Jul 21, 2012 at 4:18

Pathik Gandhi

1,3441 gold badge18 silver badges37 bronze badges

Collectives™ on Stack Overflow

JQuery Loading Dynamic Content off Dynamic Content

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related