javascript - 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 后对其进行缓存。这是一个简化的示例。

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对您的情况可能有用。

$("#country-select-element").on("countrychange", function(e, countryData) {
    // do something with countryData
});

我还建议您看看public methods 。它有一些有用的方法，您可以使用它们来实现相同的结果。