how to limit the click event in jquery loop?

Question

I would like to limit click event loop in jquery. I have categories list which will have in the following format and also after 5 click in the loop i have to disable click event.

<div class="col-md-2 col-sm-4 col-xs-6  home_s">
  <a class="get_category" id="36" href="javascript:void(0)">
    <img class="img-responsive img-center" src="">
    <span>xxxxx</span>
  </a>
  <input type="hidden" value="36" id="categories36" name="categories[]">
</div>

$(document).ready(function() {
  $(".get_category").on('click', function() {
    var cat_id = $(this).attr('id');
    var cat_value = $("#categories" + cat_id).val('');

    if ($("#categories" + cat_id).val() == '') {
      $("#categories" + cat_id).val(cat_id);
    } else {
      alert("hi");
      $("#categories" + cat_id).val('');
    }
  })
});

Create a variable to hold a click count, you could either wrap the rest of the function into an if condition or you could remove the event listener altogether... — NewToJS
– NewToJS, Commented Sep 15, 2015 at 11:26

Pranav C Balan · Accepted Answer · 2015-09-15 11:40:59Z

You can use off() to unbind event handler

$(document).ready(function() {
  // variable for counting clicks
  var i = 1;
  var fun = function() {
    var cat_id = $(this).attr('id');
    var cat_value = $("#categories" + cat_id).val('');
    if ($("#categories" + cat_id).val() == '') {
      $("#categories" + cat_id).val(cat_id);
    } else {
      alert("hi");
      $("#categories" + cat_id).val('');
    }

    // checking and increment click count
    if (i++ == 5) 
      // unbinding click handler from element
      $(".get_category").off('click', fun);
  };
  $(".get_category").on('click', fun);
});

Example :

$(document).ready(function() {
  var i = 1;
  var fun = function() {
    alert('clicked'+i);
    if (i++ == 5)
      $(".get_category").off('click', fun);
  };
  $(".get_category").on('click', fun);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="get_category">click</button>

Yabada · Accepted Answer · 2015-09-15 14:35:42Z

If you have multiple .get_category in your html the solution from Pranav C Balan won't work.

$(document).ready(function() {
  function clickFunc() {
    var click_count = $(this).data('click-count') || 0;
    var cat_id = $(this).attr('id');
    var cat_value = $("#categories" + cat_id).val('');

    if ($("#categories" + cat_id).val() == '') {
      $("#categories" + cat_id).val(cat_id);
    } else {
      alert("hi");
      $("#categories" + cat_id).val('');
    }

    if (++click_count >= 5)
        $(this).off('click', clickFunc);
    $(this).data('click-count', click_count);
  });
  $(".get_category").on('click', clickFunc);
});

This way you store the click count on the data-click-count attribute of each .get_category

Collectives™ on Stack Overflow

how to limit the click event in jquery loop?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related