jQuery handling events on dynamically added elements

I have an RMA form that I've been able to add fields dynamically, but having trouble it being able to handle events (like click, change).

I'm adding the fields by using the .appendTo("#container"); and incrementing the NAME parameter using a counter, so that when the user hits Submit--I'll get 'Category1: blah' 'Category2: blahblah' 'Category3: something_else', etc.

The problem is when I add more fields (like a dropdown box) dynamically, the events don't follow. I have 3 drop downs [category] [subcategory] [model]. When I select a category:

jQuery('#cat').bind("change", function()
    {
        jQuery('#subcat').empty();
        jQuery('#subcat').attr('disabled', 'disabled');
        jQuery('#model').empty();
        jQuery('#model').attr('disabled', 'disabled');

        LoadSeries(jQuery(this).val()); // I do a .removeAttr('disabled'); in here for #subcat

    });

In the above code, I tried adding jQuery('#cat'+counter).bind("change", function() { ... but I think that event will only fire if I change the [category] and hit the add button simultaneously.

I tried using .live but I'm not sure how to get it to work with added elements with different class/name parameters (cat2, cat3, cat4, cat5...)

Would I need separate functions as well? (LoadSeries2, LoadSeries3, etc.) for the amount of fields that are added?

Any suggestions appreciated.

EDIT: Some of the HTML code to show radio buttons above the [category] [subcategory] [model] drop downs. This is for the user to select whether it's going to be a return or an exchange.

    newTextBoxDiv.after().html('
    <div class="item'+counter+'"><br/>
    <table width="820" border=1 cellspacing="0" cellpadding="0" align="center" style="border: 1px; border-color: #000;">
      <tr>
         <td>
            <div align="center" style="font-size: 14px;">
            <input type="radio" class="radioBtn'+counter+'" name="Re开发者_如何学Goturn_Exchange'+counter+'" value="Return" selected="selected">Return
            <input type="radio" class="radioBtn'+counter+'" name="Return_Exchange'+counter+'" value="Exchange">Exchange</div>
...

you can use the live() method or in your case the delegate() method might be best. Combined with the starts-with selector (^=) you should be good to go...

$("#container").delegate("[id^='cat']", "change", function() {
    $("#subcat, #model").empty().attr("disabled", true);
    LoadSeries($(this).val());
});

jQuery using on

$("#container").on("change", "[id^='cat']", function() {
    $("#subcat, #model").empty().attr("disabled", true);
    LoadSeries($(this).val());
});

I would use an additional class specifically for items that will need to be bound to this event, etc...

<input class="cat3 eventClass" />

Then just use .live() to bind any existing or future $('.eventClass') elements to the event

You can use a starts with selector along with live Try this:

jQuery('[id^=cat]').live("change", function ()
{
    var $this = $(this);
    var id = this.id.replace(/[^0-9]/, "");
    jQuery('#subcat' + id).empty();
    jQuery('#subcat' + id).attr('disabled', 'disabled');
    jQuery('#model' + id).empty();
    jQuery('#model' + id).attr('disabled', 'disabled');
    LoadSeries(jQuery(this).val()); // I do a .removeAttr('disabled'); in here for #subcat      
});