새로 생성 된 요소에 대해 jQuery, 변경 이벤트를 트리거

Question

다른 양식 필드 세트를 클릭하면 두 번째 드롭 다운의 내용이 선택된 항목에 의존하는 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'); 

나는 이것을 해결하기 위해 모든 시간을 노력해 왔으며, 가장 가까운 것은 모든 항목에 반환 된 아약스 값을 적용했다. 현재 라이브 기능을 사용하는 사람들은 새로운 필드를 추가 할 수 있으며 드롭 다운을 다른 드롭 다운과는 독립적으로 사용할 수 있습니다. 필드가 처음으로 추가 될 때만 필드가 채워집니다.

도움을 주셔서 감사합니다.

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