Trigger a click only once for all items in the set

Question

I have a form with many fields and I'd need that click on any of them trigger a modal. This should happen only one time per the entire form, independently by which field is clicked.

Assuming that each field is idendified by the CSS class .form-control, I tried with jQuery .one() method, in this way:

$('.form-control').one('click',function(){
   $('#modal').modal();
});

This ALMOST runs correctly because surely it opens modal only first time that I clicked on each field, but if I click on another field it opens modal again, that is not the desiderata.

Here a working example with a simple example in which I open an alert instead of a modal for simplicity. If you click on the first field, alert is opened, next click on the same field does nothing (correctly) but click on the second one fire it again, and this is not what I'd need.

Please, how to limit modal opening only to first click on any field?

user_5268732 · Answer

You could remove the event handler with jQuery off method, e.g.

$(function() {
  $('.form-control').on('click', function() {
    console.log('ok');
    $('.form-control').off('click');
  });
});

Trigger a click only once for all items in the set

1 Answers