jQuery , Trigger change event on newly created elements

Question

Hi Guys,

I have a button in a form that when clicked adds another set of form fields, In these form fields there are 2 drop downs where the contents of the 2nd dropdown rely on what is selected in the first dropdown...

What i want to do is when the new form field button is clicked for the new items to be added and then the change event to be triggered on the drop down that was created so what only that drop down changes and not all the drop downs with the same name currently in that form. THe first drop down is called product Category

The code for the addFormField function is:

function addFormField() {
var id = document.getElementById("field_id").value;
$("#products").append("<table width='600' cellpadding='5' cellspacing='0' class='Add_Products' id='row" + id + "'><td width='250' class='left'><label>Select Product Category</label></td><td class='right' ><label><select name='" + id + "' id='ProductCategory'><?php foreach($categories as $key=>$category){ echo "<option value=".$key.">".$category."</option>"; } ?></select></label></td></tr><tr><td width='250' class='left'><label>Select Product Template</label></td><td class='right' ><label><select name='data[QuoteItem][" + id + "][product_id]' id='QuoteItem" + id + "product_id' class='Product' title='" + id + "'></select></label></td></tr><tr ><td class='left'>Name</td><td class='right'><label><input name='data[QuoteItem][" + id + "][name]' type='text' id='QuoteItem" + id + "name' size='50' /></label></td></tr><tr ><td class='left'>Price (ex GST)</td><td class='right'><input type='text' name='data[QuoteItem][" + id + "][price]' id='QuoteItem" + id + "price' onchange='totalProductPrice();' class='quote-item-price' value='0' /></td></tr><tr><td class='left'>Description</td><td class='right'><label><textarea name='data[QuoteItem][" + id + "][description]' cols='38' rows='5' id='QuoteItem" + id + "description'></textarea></label></td></tr><tr><td><a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a></td></tr></table>");


$('#row' + id).highlightFade({
    speed:1000
});

id = (id - 1) + 2;
document.getElementById("field_id").value = id;

}

The code that detects change in ProductCategory dropdown and triggers the AJAX is below:

  $("select#ProductCategory").live('change', function(){
        var url = base + "/quotes/productList/" + $(this).val() + "";
        var id = $(this).attr('name');
        $.getJSON(url,{id: $(this).val(), ajax: 'true'}, function(j){
          var options = '';
        options += '<option value="0">None</option>';
          $.each(j, function(key, value){
        options += '<option value="' + key + '">' + value + '</option>';
          })
          $("select#QuoteItem" + id + "product_id").html(options);
        })
      }).trigger('change');

I have been trying all afternoon to work this out and the closest one i got to work applied the returned ajax values to all items. Currently using the live function people can add new fields and are able to use the drops down independant of each other dropdown but its only when the field is first added that i have trouble getting is populated

Thanks in advance for any help

Answer 1

I'm assuming you've attached a change event to the select.Product and need to trigger it after pushing the potential values into it? Try adjusting your AJAX callback like so:

function(j){
  var options = '';
  options += '<option value="0">None</option>';
  $.each(j, function(key, value){
    options += '<option value="' + key + '">' + value + '</option>';
  }
  // setup options and trigger change event.
  $("select#QuoteItem" + id + "product_id").html(options).trigger('change');
)