Delegate not working!

Delegate not working!


I have a form that is in a hidden div that appears when the user clicks a link on the page.

My first problems is that some jquery code I have written to set 'keyup' event on all items in the form with a name that contains 'tbQuantity' and has an input, should get the event.

Here is my javascript. It is located at the top of the page. This page has a master page (it's an ASP.NET site)

  1. $(document).ready(function() {
  2.     $("td[id*='tdQuantity']").delegate('input', 'keyup', function() { calculateTotal(); });
  3. });
  4. function calculateTotal() {
  5.     alert('calculate Total here');
  6. }

This runs when the page loads, but then if I click to open the form (display the div) the textbox in question has no such event on it.

If I then open Firebug and paste in the code above, firebug displays this.

Form them on the keyup on the first tbQuantity input works as it should.

But my problem does not stop there.

I have a button on this form to add a new row dynamically to the page. This works as expected and adds an identical set of td's to a new row. Identical except for the names of the elements within each row. Post-fixed with an index value.  The image below shows the tds in question (opened)



However, the new tbQuantity_2 does NOT have the keyup event despite what the jquery documentation for delegate says.

Now if I run the jquery in firebug again, I see this.



At this stage the 2nd (dynamic row) gets the event as expected,. However tbQuantity_1, the original row, runs the event twice everytime I enter a key.

What is going on with delegates?

For the record I am using Firefox 3.6.10