New element event binding is unclear

[UncleJoe]

I have been hunting the internet for a good explanation, but I can't seem to find one; or I'm simply not getting it...

I have a page with a table, where new rows can be added via AJAX. Each row has an input box which can be updated in one of two ways: 1) changing the value, or 2) by a button click. I am completely unclear on how to get the new rows registered with the DOM, .live(), .delegate(), .bind() ????? I don't really see how to use these methods. Here's the JS (JQuery 1.4.2):

$(document).ready(function(){
   $(".productSelect").click(function() {
   var id = $(this).attr('id');

   $.ajax({
      type: "GET",
      url: "http://www.website.com/index/cartaction",
      data: "id="+id+"&quantity="+quantity,
      success: function(data) {
         /* check if the element exists */
         if ( ! chkObject(false,'product'+id) ) {
	    /* assemble elements for a new row */
	    td1 = '<td id="quantity'+id+'"><input type="text" size="2" value="'+data['quantity']+'" name="quantity['+id+']"></td>';
	    td2 = '<td id="name'+id+'">'+data['product_name']+'</td>';
	    td3 = '<td id="price'+id+'" class="priceCol">'+price+'</td>';
	    /* insert element into document */
	    $('#orderItems  tbody>tr:last').after('<tr id="product'+id+'">'+td1+td2+td3+'</tr>');
	 } else {
	   /* update elements in an existing row */
	   td1 = '<input type="text" size="2" value="'+data['quantity']+'" name="quantity['+id+']">';
	   document.getElementById('quantity'+id).innerHTML = td1;
	   document.getElementById('price'+id).innerHTML = price;
	 }
         return;
      },
         error: function() {
	 alert("There was a problem you jackwagon!");
	 return false;
      }

   $("input[type='text'][name^=quantity\\[]").change(function() {
         /*get input value */
         var quantity = $(this).val();
         /* get id from 'name' (there's some parsing here) */
          var id = $(this).attr('name').val();

         $.ajax({
            type: "GET",
            url: "http://www.website.com/index/cartaction",
            data: "id="+id+"&quantity="+quantity,
            success: function(data) {
                /* set the current price */
		var price = (data['unit_price']*data['quantity']).toFixed(2);
                td1 = '<input type="text" size="2" value="'+data['quantity']+'" name="quantity['+id+']">';
               document.getElementById('quantity'+id).innerHTML = td1;
               document.getElementById('price'+id).innerHTML = price;
	       return;
	    },
            error: function() {
               alert("There was a problem updating you jackwagon!");
	       return false;
	    }
         });
      });
   });
});

Any help would be greatly appreciated-
UJ

[hielo]

this:

$(document).ready(function(){
   $(".productSelect").click(function() {
     alert( this.innerHTML );
   });
});

is equivalent to this:

$(document).ready(function(){
   $(".productSelect").bind('click',function() {
     alert( this.innerHTML );
   });
});

but bind will "attach/trigger" that anonymous function upon document.ready ONLY to already existing elements with class="productSelect".

So, the elements that you are adding via ajax with class="productSelect" do not exist upon page load (document.ready). They exist LATER on AFTER the bind has done executing, so they will NOT trigger that alert. Instead of bind() you need to use live(). live() will "keep an eye" for dynamically created elements and if needed will attach the necessary anonymous function:

$(document).ready(function(){
   $(".productSelect").live('click',function() {
     alert( this.innerHTML );
   });
});

[UncleJoe]

That did it. I didn;t try it, but I assume that's the case for the change event too. Seems so easy when someone tells me how to do it!

Thanks a million.