Question

因此，在我的网络应用中，有一个ID为#billing_address_1的字段。用户可以在此字段中输入他们的地址，也可以从其自动填充中选择一个值，请记住，这不是在浏览器自动完成中构建的。

在另一个js文件中有一个事件监听器，它监听#billing_address_1的任何更改。脚本是：

jQuery(function($){
    $('#billing_address_1').on('change paste keyup blur', function(){
        console.log($(this).val());
    });
});

当用户在其地址中输入内容时脚本运行良好，但是当用户从自动填充中选择一个值时，不是从自动填充中打印选定值，而是打印旧值。恩。用户在band中输入，然后从自动填充中选择bandung，它会在js控制台中打印band。

自动填充代码：

jQuery(function($){
    $('<div id="addr-find">').appendTo('body').css({
        'position': 'absolute',
        'display':'none',
        'top':'0',
        'left':'0',
        'padding':'10px',
        'background': '#fff',
        'box-shadow':'0 0 2px #ccc',
        'max-height': '250px',
        'overflow-y':'auto'
    });

    $(document).on('click', function(e){
        if($(e.target).parents('#addr-find').length == 0 && e.target.id != 'billing_address_1'){
            $('#addr-find').hide();
        }
    });

    $('#billing_address_1').on('focus', function(){
        $('#addr-find').show();
    });

    $('#billing_address_1').on('keyup', function(){
        var data = {
            action: 'search_address',
            addr: $(this).val()
        }, $this = $(this), borderWidth = ($this.css('borderWidth').length) > 0 ? parseInt($this.css('borderWidth').replace(/[^\d]/g, '')):0;

        var top = $this.offset().top + $this.innerHeight() + borderWidth;
        var left = $this.offset().left;
        var width = $this.innerWidth() + borderWidth

        console.log(top, $this.innerHeight(), borderWidth);

        $('#addr-find').css({
            "top": top,
            "left": left,
            "width": width
        }).html('Loading...').show();

        $.post(AddrFind.ajaxurl, data, function(response){
            if(response.length > 0){
                lis = [];
                for(var i = 0; i < response.length; i++){
                    lis.push('<li style="border-bottom:1px solid #ddd;padding-bottom:5px;margin-bottom:5px"><a href="#" class="list-addr">'+response[i]+'</a></li>');
                }

                $('#addr-find').html('<ul style="margin:0;list-style:none">'+lis.join('')+'</ul>').show();

                $('body').off('click').on('click', '#addr-find a', function(e){
                    e.preventDefault();

                    $this.val($(this).text());
                    $('#addr-find').hide();
                });
            }
        }, 'json');
    });
});

Answer 1

这里实际发生的是您在自动完成功能将值分配给字段之前打印输入字段的值。如果您可以在此处提供自动填充代码，我们可以提供答案。我知道这是一个评论，但我别无选择，只能在这里发表评论，因为我只是在达到50个声誉里程碑时才发表评论。

在这里编辑：

这是旧帖子的复制代码。但这应该创建一个obj protoype监视事件。使用手表而不是改变事件应解决您的问题

if (!Object.prototype.watch) {
    Object.defineProperty(Object.prototype, "watch", {
          enumerable: false
        , configurable: true
        , writable: false
        , value: function (prop, handler) {
            var
              oldval = this[prop]
            , newval = oldval
            , getter = function () {
                return newval;
            }
            , setter = function (val) {
                oldval = newval;
                return newval = handler.call(this, prop, oldval, val);
            }
            ;

            if (delete this[prop]) { // can't watch constants
                Object.defineProperty(this, prop, {
                      get: getter
                    , set: setter
                    , enumerable: true
                    , configurable: true
                });
            }
        }
    });
}

// object.unwatch
if (!Object.prototype.unwatch) {
    Object.defineProperty(Object.prototype, "unwatch", {
          enumerable: false
        , configurable: true
        , writable: false
        , value: function (prop) {
            var val = this[prop];
            delete this[prop]; // remove accessors
            this[prop] = val;
        }
    });
}

感谢Github上这个家伙的帖子 https://gist.github.com/eligrey/384583

通过另一个脚本听取价值变化

1 个答案: