将动态内容添加到表单字段时，不会发生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); 

试试吧，让我知道这是否适合你。