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。它有一些有用的方法可以用来实现相同的结果。