Question

I’m loading a simple page using:

$.get('../admin/login.php', function(data) { $('#box-contents').html(data); });

Now, on this login.php page I have an input field, and in my global JavaScript file, I have an event that triggers on .change() – but this isn’t firing!?

Is this because I have loaded this file on the page so jquery doesn’t know that it’s now there? Do I need to also include my global JS file within the ‘login.php’ page too?

Any help on this would be much appreciated

Answer 1

instead of using .get(), use .load() as it was intended for this purpose. Also for your .change() event, you need to either attach it after the element exists (which could be done in your callback below), or you can use .live() to attach the event to any current or future DOM elements.

Callback method

$('#box-contents').load('../admin/login.php', function() {
    $('input').change(function() {
        //do stuff on change
    });
});

Live method

$('input').live('change', function() {
    //do stuff on change
});