JQuery Selector Problem

[mrmike]

I'm developing a pretty extensive online application (social network) and i'm having a problem with Jquery, unfortunately the code is probably far to long for me to post but I'll try to explain my problem.

I have multiple input fields that have been loaded into a div dynamically via JQuery's .ajax(). In the onComplete handler for this I have added a click handeler to the form fields, however ONLY THE FIRST FIELD RESPONDS. All of them should respond. What is the problem?

My Code:


$(document).ready(function(){

function grabContents(startAt){
$.ajax({
type: "POST",
url: "grabContents.php",
data: dataString,
complete:function(){
// I have tried putting the click event here also, no go...
},
success: function(returned){
$('#div name').html(returned);
$('#input id').click(function(){
// This is only working on the first field.
alert($(this).val());
});

}
});
}
grabContents(0);
});


I have two other functions that are doing the same thing and they both are attaching click handelers to dynamically generated content, and they work... This just won't even when it's by itself....

Any advise?

[simplistik]

#input id can only be applicable to one object since an id is unique. so it's gonna only catch the first object that has that ID.

You should have something more along the lines of


$('.class_of_inputs').each(function(i){
$(this).click(function(){
alert($(this).val());
});
});


This probably works the same too


$('.class_of_inputs').click(function(){
alert($(this).val());
});