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方法中的click事件...电话选择器工作但是没有触发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。它有一些有用的方法可以用来实现相同的结果。

jquery click或touchstart事件无法在移动设备上运行

1 个答案: