Javascript 将内容动态添加到表单字段时不发生jQuery.change（）

此代码从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（）似乎不会发生

我一直在寻找原因，而且我对jQuery/JS比较陌生（~4天），所以我不知道如何开始解决这个问题。欢迎提供任何建议或想法。

JavaScript更新字段时不会触发change（）

最简单的解决方案是让其中一个元素触发变更方法

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

或

JavaScript更新字段时不会触发change（）

最简单的解决方案是让其中一个元素触发变更方法

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

或

---

更改不起作用如果动态更改其值，则必须手动更改

我会这样做

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

---

尝试一下，并让我知道这是否适合您。

更改不起作用如果您动态更改其值，则必须手动执行

我会这样做

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

---

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

这很有效。谢谢。：）我同意第一种选择。当我被允许的时候，我会接受这个答案，这很有效。谢谢。：）我同意第一种选择。当我被允许时，我会接受这一点作为答案。这可能会奏效，但添加.trigger（'change'）所需的代码更少，因为我只需要为我更新的最后一个元素触发更改，它将测试其他元素。尽管如此，还是要感谢你，知道不止一种做某事的方法总是很有帮助的，我相信我会发现这在将来作为（不幸的）jQuery时很有用，而且我会花更多的时间在一起。这可能会奏效，但添加了.trigger（'change'）因为我只需要为我更新的最后一个元素触发更改，并且它将测试其他元素，所以需要更少的代码。尽管如此，还是要感谢这一点，知道不止一种做事的方法总是很有帮助的，我相信我会发现这一点在将来很有用，因为（很遗憾）jQuery和我在一起的时间会比我想要的多。