Hello. Tell me please. How to do what would be when you click on "Zone 1" and then on "Zone 2", and then on "Delete", only Zone 2 displayed an alert? I understand the event of clicking on the region-delit piling up, but I do not know how they can be cleaned up.

Example

$('body').on('click', '.region-edit', function() { var text = $(this).text(); $('#del_btn').click(function() { alert(text); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="uk-button uk-button-primary uk-button-small region-edit">Зона 1</button> <button class="uk-button uk-button-primary uk-button-small region-edit">Зона 2</button> <button class="uk-button uk-button-primary uk-button-small region-edit">Зона 3</button> <button id="del_btn" class="uk-button uk-button-primary uk-button-small">Удалить</button>

    3 answers 3

    Strange behavior of the code inside the handler for clicking the Delete button is reasonable. What happens is that you inside the click handler for '.region-edit' create a click handler for the Delete button. That is, the number of times you click on '.region-edit' , the number of times you create this block of code:

     $('#del_btn').click(function() { alert(text); });

    What will subsequently lead to the fact that by clicking on the Delete button, you will call handlers time after time in the sequence in which they were added. For the code to execute what you indicated in your question - it is enough to render, for example, a global variable, if you want to store it in a JS code, or you can store it in hidden on the page or in attributes, in general, the mass approaches will be more obvious if we take out the variable var text = ""; in which the text of the last clicked '.region-edit' will be stored.

    As for the handler for clicking the Delete button, it should be removed from the click handler for '.region-edit' , just put it next to it to have one copy.

     var text = ""; $('body').on('click', '.region-edit', function() { text = $(this).text(); }); $('#del_btn').click(function() { alert(text); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="uk-button uk-button-primary uk-button-small region-edit">Зона 1</button> <button class="uk-button uk-button-primary uk-button-small region-edit">Зона 2</button> <button class="uk-button uk-button-primary uk-button-small region-edit">Зона 3</button> <button id="del_btn" class="uk-button uk-button-primary uk-button-small">Удалить</button>

    • Many thanks to all participants. Especially the author of this answer) - Maxim

    A bit of pure js and creativity:

     let buttons = document.querySelectorAll('button'); let button_text; let button_id; Array.from(buttons).forEach(function(el, i) { el.addEventListener('click', function(){ if(el.id == 'del_btn' ) { if(button_text !== undefined) { document.querySelector('.red').classList.add('down'); console.log('delete', button_text) } } else { for(let value of buttons) { if(value.classList.contains('red')) { value.classList.remove('red') } else { el.classList.add('red') } } button_text = el.innerText; console.log(el.id, el.innerText) } }) }) 
     .red { background: red; } .down { background: inherit; transform: scale(0.75); opacity: 0.75; transition: 400ms; } 
     <button id="Button_1" class="uk-button uk-button-primary uk-button-small region-edit">Зона 1</button> <button id="Button_2" class="uk-button uk-button-primary uk-button-small region-edit">Зона 2</button> <button id="Button_3" class="uk-button uk-button-primary uk-button-small region-edit">Зона 3</button> <button id="del_btn" class="uk-button uk-button-primary uk-button-small">Удалить</button>

      The construction of $(function() { ... }); equivalent to the following:

       $(document).ready(function() { ... });

      text && alert(text); construct text && alert(text); equivalent to the following:

       if (text) { alert(text); }

      With this condition alert() will work only after pressing one of the Зона # buttons.

      Example:

       $(function() { var text = ''; $('.region-edit').click(function() { text = $(this).text(); }); $('#del_btn').click(function() { text && alert(text); }); }); 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="uk-button uk-button-primary uk-button-small region-edit">Зона 1</button> <button class="uk-button uk-button-primary uk-button-small region-edit">Зона 2</button> <button class="uk-button uk-button-primary uk-button-small region-edit">Зона 3</button> <button id="del_btn" class="uk-button uk-button-primary uk-button-small">Удалить</button>

      • Well, at least a couple of words of explanation can be why exactly this should be done and what was wrong with the vehicle? - Alexey Shimansky
      • @ Alexey Shimansky, well, roughly the client presses the "zone 1" button and presses delete. Now it turns out that by clicking on zone 1 and zone 2 (he suddenly wants to change the solution), and then on delete, deletes 2 buttons instead of the last one. What kind of vehicle? - Maxim
      • 2
        @ Maxim TS - this is you .. Topic Starter)) .... I asked the respondent for an explanation, so that you understand what is wrong with you and what is going on in this code is vague. - Alexey Shimansky
      • @ Alexey Shimansky, well, yes it is) - Maxim