I'm trying to disable a li click event after it has clicked the first time. Essentially to stop the array data being doubled. The click is working fine for each time. My current method doesn't appear to be working. I also need to disable the other li's from being clicked once the first one has :)

Thanks

JS code is:

$('#eventType ul li').click(function(e) {
    e.preventDefault();
    var value = $(this).attr('value');
    answers.push(value);
    // Below isn't working
    $(this).click(function() {
        return false;
    });
    console.log(answers);
});

I'm trying to disable a li click event after it has clicked the first time. Essentially to stop the array data being doubled. The click is working fine for each time. My current method doesn't appear to be working. I also need to disable the other li's from being clicked once the first one has :)

Thanks

JS code is:

$('#eventType ul li').click(function(e) {
    e.preventDefault();
    var value = $(this).attr('value');
    answers.push(value);
    // Below isn't working
    $(this).click(function() {
        return false;
    });
    console.log(answers);
});

• javascript
• jquery

• You can use jQuery one method: api.jquery.com/one – Yosvel Quintero Commented May 22, 2016 at 15:37

4 Answers 4

you need to use one:

$('#eventType ul li').one('click',function(){
    //your code here
});

this event will be fired only once

UPDATE

you can do that using $.off()

$('#eventType ul li').one('click',function(){
  //your code here
  $('#eventType ul li').off('click');
});

jQuery is just JavaScript so you can easily add behaviors that you want

// basic jQuery plugin boilerplate
$.fn.once = function once(eventType, f) {
  // this = the selected elements
  return this.each(idx, elem) {
    // create reference to jQuery-wrapped elem
    var $elem = $(elem);
    // add event listener for eventType
    $elem.on(eventType, function(event) {
      // call the event handler
      return f(event);
      // remove the event handler
      $elem.off(eventType, f);
    });
  });
};

Usage would look like this

$('#eventType ul li').once('click', function(event) {
  console.log("you will only see this once");
});

However, this is obviously a common need so it exists in jQuery already. It's called $.one. As APIs grow, you may not know about the existence of such procedures. This answer exists to show you that you can use your brain to program the things that you want or that might be missing from a particular library. This lessens your dependence on the creator's of the lib to introduce the functionality you need.

EDIT

In a comment, you ask if the event handler can be disabled for all other LI elements after the first LI is clicked. The trouble here is that jQuery uses implicit iteration, which means that when you call $('li').on('click', ...), jQuery will bind an onclick event handler for each LI.

A better solution to this problem would be to use jQuery's event delegation

// only fire event handler for the first LI clicked
$('ul').one('click', 'li', function(event) {
  console.log($(this).text());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

This will delegate the event listener to the children LI, but once one of the LI is clicked, the event handler will be removed (because we delegated using the $.one procedure).

Try clicking one LI, you will see a message in the console. When you click the second LI, nothing will happen because the event handler was removed.

var used = false;
$('#eventType ul li').click(function(e) {
  if (used == false) {
    used = true;
    e.preventDefault();
    var value = $(this).attr('value');
    answers.push(value);
    console.log(answers);
  }
});

the way you did it was just adding another on click handler, not removing or overriding the old ond.

You can use CSS classes; add the class 'disabled' to elements you don't need, and avoid adding elements that have the classe 'disabled'.

https://plnkr.co/edit/6aloNPETHGxfiP5oYZ9f?p=preview

    $('ul li').click(function(e) {
        if(!$(this).hasClass('disabled')) {
          var value = $(this).text();
          answers.push(value);
          $('li').addClass('disabled');
        }

        console.log(answers);
    });