Select element 1 -> select option - generated using php. click on option and element 2 is generated.
Select element 2 -> generated using ajax. click on option and element 3 should be generated but isn't.
Select element 3 -> Not generated.
My question - An element created via ajax, can it be used to generate another element via ajax? I've checked the console, firebug and the error console but there is no reported problems with the javascript i use.
Below is the jQuery i use
Code: Select all
jQuery(document).ready(function(){
jQuery('select#producerGroups option').click(function(){
alert('ha');
/*
jQuery('div#innerBox').fadeOut();
var pgTerm = jQuery('select#producerGroups option:selected').val();
jQuery.post('production_ajax1.php', {'pgTerm': jQuery('select#producerGroups option:selected').val()},
function(data) {
if (pgTerm != '') {
jQuery('div#innerBox').html(data).fadeIn('slow');
}
});
*/
});
});
Any advice will be appreciated
Edit
Found a solution; apparently because the elements are not created when the ajax is called the element is not bound (or something to that effect). Here is a better explanation http://docs.jquery.com/Frequently_Asked ... do_..._.3F
The solution code is rather simple, unbind the click and add the code into the innitial ajax code.
Code: Select all
jQuery(document).ready(function(){
jQuery('select#projects option').click(function(){
jQuery('div#box').fadeOut();
var term = jQuery('select#projects option:selected').val();
jQuery.post('production_ajax.php', {'term': jQuery('select#projects option:selected').val()},
function(data) {
if (term != '') {
jQuery('div#box').html(data).fadeIn('slow');
jQuery('select#projects option').unbind('click'); // <-- important.
//
jQuery('select#producerGroups option').click(function(){
//
jQuery('div#innerBox').fadeOut();
var pgTerm = jQuery('select#producerGroups option:selected').val();
jQuery.post('production_ajax1.php', {'pgTerm': jQuery('select#producerGroups option:selected').val()},
function(data) {
if (pgTerm != '') {
jQuery('div#innerBox').html(data).fadeIn('slow');
}
});
});
}
});
});
});