Ignored attempt to cancel a touchstart : fastclick warning

Question

I'm having the first popup on which another popup comes to select few fields. To show the second popup this is the code I'm trying:

$("#select1").click(function(e) {
  e.stopPropagation();
  //$('#sellerModal').hide();
  var tmplData = {
    string:['Ready','2-3 Days','4-5 Days','1 Week','10+ Days']
  };
  $("#countTypePopupTemplate").tmpl(tmplData).appendTo(".maindiv");
  that.closePopup();
  $("#count_div").each(function() {
    $("#count_div").click(function(evt) {
      evt.stopPropagation();
      $("#select1").text($(this).text());
      $("#myCounttype").remove();
    });
  });
});

Here is the HTML template:

<script id="countTypePopupTemplate" type="text/x-jquery-tmpl">
  <div id="myCounttype" class="popup1 layer-2">
    <div class="popup5">
      {{each string}}
      <div id="count_div" class="popup4 bottom-border">${$value}</div>
      {{/each}}
    </div>
  </div>
</script>

I'm getting a warning:

Ignored attempt to cancel a touchstart event with cancelable=false, for example, because scrolling is in progress and cannot be interrupted. fastclick.js

Here I'm not able to click the 4 out of 5 elements in the second popup. Only first 1 is clickable. Snapshot of second popup.

I read all the blogs where the topic is disscussed. But didn't got any solution working for me. Looks like there is some corner case.

Answer 1

Your each function is pointing to id which makes you cannot click other buttons. You should use class to recognize the buttons.

$("#select1").click(function(e) {
  e.stopPropagation();
  //$('#sellerModal').hide();
  var tmplData = {
    string:['Ready','2-3 Days','4-5 Days','1 Week','10+ Days']
  };
  $("#countTypePopupTemplate").tmpl(tmplData).appendTo(".maindiv");
  that.closePopup();
  $(".pop_btns").each(function() {
    $(this).click(function(evt) {
      evt.stopPropagation();
      $("#select1").text($(this).text());
      $("#myCounttype").remove();
    });
  });
});

HTML template:

<script id="countTypePopupTemplate" type="text/x-jquery-tmpl">
  <div id="myCounttype" class="popup1 layer-2">
    <div class="popup5">
      {{each string}}
      <div id="count_div" class="popup4 bottom-border pop_btns">${$value}</div>
      {{/each}}
    </div>
  </div>
</script>

Answer 2

Try using some parent selector before $("#count_div").each(function() { $("#count_div").click(function(evt) { Like this $(".parent_class #count_div").each(function() { $(".parent_class #count_div").click(function(evt) {

This will solve 1 time running each() for "#count_div" .

So the actual problem is each() is running only 1 time, that's why your first element that is Ready click event is working, not others.