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.
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.