我正在使用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
事件不会被触发来填充我的隐藏字段。
最佳答案
您需要确保在渲染 DOM 后对其进行缓存。这是一个简化的示例。
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
对您的情况可能有用。
$("#country-select-element").on("countrychange", function(e, countryData) {
// do something with countryData
});
我还建议您看看public methods 。它有一些有用的方法,您可以使用它们来实现相同的结果。
关于javascript - jQuery 单击或 touchstart 事件在移动设备上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43787234/