$('#one, #two, #three').click(function(){}); 

It is necessary to obtain a list of elements to which this event is associated with this function.

UPD:

I need that when I click on one of the elements that are processed by this event, it alone remains accessible, while others are blocked.

  • one
    here you have no items, and the event calls the function - Artem Gorlachev
  • Perhaps the author meant how in the function to understand on which element a click occurred? If yes, then look in target: click(function(e){console.log(e.target)}); - Mikhail Lelyakin
  • ... a list of all the elements that call the function - '#one, #two, #three'. Please specify your question in more detail. - Alex
  • I meant, inside the function that is called by the click event, to know all the elements that trigger the click event (in this case: one, two, three). - Soul History
  • what does work mean? It only works when the corresponding element is pressed. Why do you need to know where else this click handler is assigned? Are you sure that this is what you need? - teran

1 answer 1

I need this so that after the click I can exclude an element that I clicked from elements that have not been pressed yet

If this phrase means that in fact the handler needs to be executed only once for each element, then we can consider several ways to solve this problem.

The first:
when clicked, set an attribute indicating that the handler has already been invoked for this element.

 $("#one, #two, #three").click(function(){ var done = $(this).data('done'); if(done) return; console.log($(this).attr('id') + ' clicked'); $(this).data('done', true); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="one">btn 1</button> <button id="two">btn 2</button> <button id="three">btn 3</button> 

Second:
mark all elements as one class, attach the handler to the common parent by specifying the class as a selector. When clicking, remove the class from the item.

 $("#wrapper").on('click', '.active', function(){ $(this).removeClass('active'); console.log( $(this).attr('id') + ' clicked' ); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <button id="one" class="active">btn 1</button> <button id="two" class="active">btn 2</button> <button id="three" class="active">btn 3</button> </div> 

Third:
disconnecting the handler from the item itself is the shortest option.

 $("#one, #two, #three").click(function(e){ console.log( $(this).attr('id') + ' clicked'); $(this).off(e); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="one">btn 1</button> <button id="two">btn 2</button> <button id="three">btn 3</button> 

If it’s still a question of leaving a handler, but knowing that an event has already been executed for a given element, then there are options - mark it with a data attribute, or add some class to the element.

 $("...").click(function(){ $(this).addClass('clicked'); // или $(this).data('clicked', true); }); 

later, by obtaining the value of the attribute, or by checking the presence of the class .hasClass('active')

it is necessary that when you click on one of the elements that are processed by this event, it alone remains available, while others are blocked. And for that, I need to find out exactly which elements in the handler.

The simplest and most understandable option will be with the general handler on the parent element, and deleting the class from the other elements. Although the option with off should be similar.

 $("#wrapper").on('click', '.active', function(){ console.log( $(this).attr('id') ) ; $('.active').not( $(this) ).removeClass('active'); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <button id="one" class="active">btn 1</button> <button id="two" class="active">btn 2</button> <button id="three" class="active">btn 3</button> </div> 

  • Look, I need so that when you click on one of the elements that are processed by this event, it alone will remain accessible, while others will be blocked. And for that, I need to find out exactly which elements in the handler. I will try the class option. - Soul History
  • @SoulHistory supplemented the answer. - teran
  • Thanks for the help and the time spent! - Soul History
  • @Alex be careful with code formatting. You do not need to format all the code for any of your own ideas and preferences. Spaces and line breaks that you have so diligently removed are designed to separate logical blocks to increase readability of the code. And in general, read when it is necessary and do not need to edit the questions / answers. Edits should improve, not add italics. - teran
  • @teran you initially had a typo in one word, the rest was added at the same time to increase readability (compare before and after). Honestly, it is not clear how to separate the console.log(...) from another code and improves its readability in only one response code, but if you think it harmed your answer, I apologize. - Alex