將動態內容添加到表單字段時，不會發生jQuery .change（）

Question

此代碼從API填充表單。

$('#shipper_search').click(function(){ 

    var searchBy = $('#shipper_search_by').val(); 
    var searchFor = $('#shipper_search_for').val(); 
    var warehouse = $('#warehouse').val(); 

    $.get('index.php?p=api&r=json&c=location&m=find&d=' + searchBy + '/' + searchFor + '/shipper/' + warehouse , function(data, status){ 

     data = $.parseJSON(data); 

     $('#shipper_name').val(data['body'][0]['location_name']); 
     $('#shipper_address1').val(data['body'][0]['address1']); 
     $('#shipper_address2').val(data['body'][0]['address2']); 
     $('#shipper_city').val(data['body'][0]['city']); 
     $('#shipper_state').val(data['body'][0]['state']); 
     $('#shipper_zip').val(data['body'][0]['zip']); 
     $('#shipper_country').val(data['body'][0]['country']); 

     $('#shipper_contact_name').val(data['body'][0]['contact_name']); 
     $('#shipper_contact_phone').val(data['body'][0]['phone']); 
     $('#shipper_contact_fax').val(data['body'][0]['fax']); 
     $('#shipper_contact_email').val(data['body'][0]['email']); 

    }); 

}); 

每次在該部分中的字段的改變將以下代碼應該運行：

$('#shipperinfo').find('input:text').change(function(){ 

    var valid = 0; 

    if($('#shipper_name').val().length > 0){ 
     valid++; 
    } 

    if($('#shipper_address1').val().length > 0){ 
     valid++; 
    } 

    if($('#shipper_city').val().length > 0){ 
     valid++; 
    } 

    if($('#shipper_state').val().length > 0){ 
     valid++; 
    } 

    if($('#shipper_zip').val().length > 0){ 
     valid++; 
    } 

    if($('#shipper_country').val().length > 0){ 
     valid++; 
    } 

    if(valid == 6) { 

     $('#shipper_ok').removeClass('hide'); 

    } else { 

     $('#shipper_ok').addClass('hide'); 

    } 

}); 

當用戶手動類型的信息到現場，所述第二功能完美地工作。但是，當他們使用搜索功能填充表單時，.change（）似乎不會發生。

我一直在尋找一個年齡，爲什麼，我相對較新（約4天）jQuery/JS，所以我不知道如何開始解決這個問題。任何建議或想法表示讚賞。

Answer 1

JavaScript更新字段時，不會觸發change（）。

最簡單的解決方法是具備的要素之一觸發這種改變方法

$('#shipper_contact_email').val(data['body'][0]['email']).trigger("change"); 

或

$('#shipper_contact_email').val(data['body'][0]['email']).change(); 

Answer 2

變化不工作，如果你改變它的價值動態，你必須做手工。

我會這樣做。

$('#shipper_search').click(function(){ 

var searchBy = $('#shipper_search_by').val(); 
var searchFor = $('#shipper_search_for').val(); 
var warehouse = $('#warehouse').val(); 

$.get('index.php?p=api&r=json&c=location&m=find&d=' + searchBy + '/' + searchFor + '/shipper/' + warehouse , function(data, status){ 

    data = $.parseJSON(data); 

    $('#shipper_name').val(data['body'][0]['location_name']); 
    $('#shipper_address1').val(data['body'][0]['address1']); 
    $('#shipper_address2').val(data['body'][0]['address2']); 
    $('#shipper_city').val(data['body'][0]['city']); 
    $('#shipper_state').val(data['body'][0]['state']); 
    $('#shipper_zip').val(data['body'][0]['zip']); 
    $('#shipper_country').val(data['body'][0]['country']); 

    $('#shipper_contact_name').val(data['body'][0]['contact_name']); 
    $('#shipper_contact_phone').val(data['body'][0]['phone']); 
    $('#shipper_contact_fax').val(data['body'][0]['fax']); 
    $('#shipper_contact_email').val(data['body'][0]['email']); 

    //here what i call it manually 
    $('#shipperinfo').find('input:text').change(); 

}); 

}); 

並將該函數綁定到該事件。

function change_callback() 
{ 
    var valid = 0; 

    if($('#shipper_name').val().length > 0){ 
     valid++; 
    } 

    if($('#shipper_address1').val().length > 0){ 
     valid++; 
    } 

    if($('#shipper_city').val().length > 0){ 
     valid++; 
    } 

    if($('#shipper_state').val().length > 0){ 
     valid++; 
    } 

    if($('#shipper_zip').val().length > 0){ 
     valid++; 
    } 

    if($('#shipper_country').val().length > 0){ 
     valid++; 
    } 

    if(valid == 6) { 

     $('#shipper_ok').removeClass('hide'); 

    } else { 

     $('#shipper_ok').addClass('hide'); 

    } 

} 

$('#shipperinfo').find('input:text').on('change', change_callback); 

試試吧，讓我知道這是否適合你。