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

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原型观看事件。使用 手表而不是改变事件应该解决您的问题

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