jquery click or 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メソッドの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もご覧ください。同じ結果を得るために使用できる便利な方法がいくつかあります。