Question

This is a general question, I have two pages, a main and a backgound function one (file.php)

Main page loads file.php passing variables:

$(document).ready(function() { 
    var page     = $('#page').attr('value');  
    var user     = $('#user').attr('value');
    $('#DIV').load('file.php?user=' + user + '&page=' + page);
});  

File.php queries database, inserts variables into more jquery stuff..

echos result…

The result on the main page is the desired one. If I fixe the variables in file.php (and load through browser) the script is fully functionnal and interactive.

My problem is as follows:

The file.php part of the main page is not interacive, i.e. when I click on it nothing happens, yet the 2 work fine idependently, together variables are passed, but the result is static.

My question, is this due to the .load() function? Should I be using $.ajax() type GET …

Thanks in advance.

Answer 1

It sounds like you have jQuery behaviours attached to the DOM that are not being applied to the new content. This is because the new content is loaded after the DOM is ready (ie, after the load event fires).

This can be solved by using the .live jQuery function to attach events to a selector that will be applied to all elements, regardless of when they’re added. E.g, instead of:

$('#button').click(function() { alert('hi'); });

Use:

$('#button').live('click', function() { alert('hi'); });