jQuery, событие изменения триггера на вновь создаваемых элементах

Question

У меня есть кнопка в форме, которая при нажатии добавляет другой набор полей формы. В этих полях формы есть 2 раскрывающихся списка, в которых содержимое 2-го раскрывающегося списка зависит от того, что выбрано в первом раскрывающемся списке ...

То, что я хочу сделать, это когда кнопка нового поля формы нажата для добавления новых элементов, а затем событие изменения, которое будет вызвано в раскрывающемся списке, который создается, так что меняется только этот раскрывающийся список, а не все выпадающие с таким же именем в настоящее время в этой форме. Первый выпадающий список называется Категория продукта

Код для функции addFormField:

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;

}

Код, который обнаруживает изменение в выпадающем меню ProductCategory и запускает AJAX, приведен ниже:

  $("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');

Я пытался весь день отработать это, и ближайший, который я получил, применил возвращенные значения ajax ко всем элементам. В настоящее время, используя живую функцию, люди могут добавлять новые поля и могут использовать выпадающие списки, независимые друг от друга, но только при первом добавлении поля у меня возникают проблемы при заполнении.

Заранее спасибо за любую помощь

Answer 1

Я предполагаю, что вы прикрепили событие change к select.Product и хотите запустить его после добавления в него потенциальных значений? Попробуйте настроить обратный вызов AJAX следующим образом:

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');
)