jQuery Store one item at a time

Question

I have following code.

• There are several options

• But just one option I’d like to disavow

• I click one to check then another

• Finally when I find the option I want, then click on the button "Disaggregate"

• And unmake only where I clicked

The problem:

If I click on other previous options, and is finally click on debug, it stores all previous ones, executes all other codes

I would like him to perform only the current.

Type it excludes the other options too.

 function cardapio(codigo){
    $('#cardapioModal').modal();
    $('.btn-desagenda').on('click',function(){
         alert(codigo);
    });
                 
  }

  
    


    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>


    <!-- Modal -->
    <div id="cardapioModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"><span class="title-card"></span></h4>
                </div>
                <!--<div class="modal-body">
                    <p><span class="texto-cardapio"></span></p>
                </div>-->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger btn-desagenda" data-dismiss="modal">Desagendar</button>
                    <button type="button" class="btn btn-default btn-close" data-dismiss="modal">Fechar</button>
                </div>
            </div>

        </div>
        
        
    </div>

    <table border='1'>
       <tr>
         <td><a href='#' onclick="cardapio(1)">01/01/2017</a></td>
         <td>Cardapio 1</td>                  
        </tr>
        <tr>
         <td><a href='#' onclick="cardapio(2)">02/01/2017</a></td>
         <td>Cardapio 2</td>                  
        </tr>
        <tr>
         <td><a href='#' onclick="cardapio(3)">03/01/2017</a></td>
         <td>Cardapio 3</td>                  
        </tr>
    </table>

Answer 1

Are you having some problem initializing the var 'code'.

This works, but remember that global variables are not recommended :

var x = 0; function cardapio(cod){ x = cod; $('#cardapioModal').modal();
} $('.btn-desagenda').click(function(){ alert(x); });

Initializing each call the value of 'x', you will have no problem, but I still can’t explain why your code does not reset the value alone each call. But I hope it helps you.