jquery點擊或touchstart事件不適用於手機

Question

我使用intl-tel-input來獲取人們的電話代碼和國家。當他們選擇的標誌和代碼我有一些jQuery的有分別獲得國家和代碼，並填充隱藏字段...

這裏是處理這些操作整個對象：

var telInput = { 
    init: function(){ 
     this.setTelInput(); 
     this.cacheDOM(); 
     this.bindEvents(); 
    }, 
    cacheDOM: function(){ 
     this.$countryCode = $('input[name=country_code]'); 
     this.$countryName = $('input[name=country_name]'); 
     this.$country  = $('.country'); 
    }, 
    bindEvents: function(){ 
     this.$country.on('click', this.getTelInput.bind(this)); 
    }, 
    setTelInput: function(){ 
     $('input[name=phone]').intlTelInput({ 
      preferredCountries: [ 
       'gb' 
      ], 
     }); 
    }, 
    getTelInput: function(e){ 
     var el   = $(e.target).closest('.country'); 
     var countryCode = el.attr('data-dial-code'); 
     var countryName = el.find('.country-name').text(); 
     this.$countryCode.val(countryCode); 
     this.$countryName.val(countryName); 
    }, 
} 

問題

問題是bindEvents方法中的單擊事件...手機選擇器工作，但onclick事件沒有被觸發來填充我的隱藏字段。

Answer 1

您需要確保在渲染DOM後緩存DOM。這是一個簡單的例子。

View on jsFiddle

var telInput = { 
    init: function(){ 
    this.cacheDOM(); 
    this.bindEvents(); 
    }, 
    cacheDOM: function() { 
    this.$country = $('.country'); 
    }, 
    bindEvents: function() { 
    this.$country.on('click', function() { 
     // console.log('Triggered'); 
    }); 
    } 
} 

$(document).ready(function() { 
    telInput.init(); 
}); 

---

而且，插件的事件countrychange可能是你的情況是有用的。我也建議你看看public methods。它有一些有用的方法可以用來實現相同的結果。