jQuery Store one item at a time

Navigation
0

I have following code.

  • There are several options

  • But only one option I would like to disagree with

  • Click on one to check on another

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

  • And just disagree where I clicked

  

The problem:

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

I would like it to execute only the current one.

Type it exclude the other options as well. 

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


    <script src="https://code.jquery.com/jquery-3.2.1.js"></script><scriptsrc="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>
    
asked by anonymous 19.05.2017 / 17:23

1 answer

1

You have a problem initializing var 'code'.

This works, but keep in mind that global variables are not recommended:

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

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

    
19.05.2017 / 20:34
CSS and JS does not load on mobile, via localhost Bank data for days of the week