Hello, I am fairly new to jQuery so if this is obvious please be
gentle :P
I am currently trying to get a plugin script (or any script for that
matter) to fire when used inside of a div that contains content that
was loaded using AJAX.
In this case I have a page that onLoads a user input form into a div
using AJAX. The jQuery plugin I am using is Autotab (http://
www.lousyllama.com/sandbox/jquery-autotab) which is used to
automatically tab through the phone number fields (555 'tab' 321 'tab'
4567). This works flawlessly when used on a non-ajax page, but I
cannot get it working here.
Logic:
Container page:
loads the jQuery and plugin scripts in html head
body onLoads the form page using ajax into the div
ajax-loaded script:
prepares the script to fire (using jQuery document.ready) as
below:
$(document).ready(function() {
$('#ph1').autotab({ target: 'ph2', format: 'numeric' });
$('#ph2').autotab({ target: 'ph3', format: 'numeric',
previous: 'ph1' });
$('#ph3').autotab({ previous: 'ph2', format: 'numeric' });
});
below that is the form with the text inputs id=ph1, ph2, ph3
The only thing I can attribute to this not working is the fact that
the form is loaded after the document is technically 'ready'. Oh and
I have tried putting the document.ready part in the header of the
container page and still doesn't work. And if this matters, the AJAX
scripts I am using are from my own ajax modules library (not jQuery
ajax) that I built, and work flawlessly to do their part... so far.
I really appreciate any help any of you gurus may provide,,, my
background is more in the back-end scripting (php, mysql, etc.) and
javascript, although fascinating, is still quite foreign to me!
THANKS!
- Keith
