Why doesn't a jQuery change function work after loading html with AJAX?

modify this:

$('#ve_categoryNo').change(function() { 

to

$(document).on('change', '#ve_categoryNo', function() { 

EDIT3: This would perform the best after an examination of your code more closely:

   $('#ve_categoryNo_td').on('change', '#ve_categoryNo', function() {

as it binds closest to the element in question.

---

You should also put the ajax call inside the ready script I would think.

The reason this is occuring is that there is nothing in the DOM to bind to when it is instantiated. Using the .on in this manner binds it to the document instead. If you had another "fixed" element that wraps it, it might be better to bind to that using that in place of "document" as it would likely perform better.

EDIT: Note that you COULD also add the change event management after you inject the element as part of the ajax call completion, but if you do this more than once, you should unbind it first in that case.

EDIT2: since there are questions/comments: FROM THE DOCUMENTATION: http://api.jquery.com/on/

Attaching many delegated event handlers near the top of the document tree can degrade performance. Each time the event occurs, jQuery must compare all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of document or document.body for delegated events on large documents.

I think the element you are binding to in the line:

$('#ve_categoryNo').change(function() { ...

does not yet exist in the DOM, so the event does not get bound.

Try using the .live function:

$('#ve_categoryNo').live('change', function() { ... });

Or make sure that your DOM elements exist before you try to bind events to them.