Question

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="Return_Exchange'+counter+'" value="Return" selected="selected">Return
            <input type="radio" class="radioBtn'+counter+'" name="Return_Exchange'+counter+'" value="Exchange">Exchange</div>
...

Answer 1

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());
});