首页 文章

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

提问于
浏览 次
0

我正在使用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);
    },
}

Problem

问题是bindEvents方法中的click事件...电话选择器工作但是没有触发onclick事件来填充我的隐藏字段 .

javascript jquery mobile javascript-events onclick

1 回答

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

    回复于

相关问题