How to recognize button / element click within a modal window?

Navigation
0

How to recognize button / element click within a modal window?

I tried the following without success: 

$("#modalEscolha").bind('click', function () {
    if ($("#escolherComp").data('clicked')) {
        alert("Componente!");
    } else if ($('#escolherKIT').data('clicked')) {
        alert("KIT!");
    } else {
        $('#acionamento').prop('selectedIndex', 0);
    }
});

Editing :

I have a input select , which must be set according to modal closure or with the click of the buttons: escolherComp or escolherKIT . If the user closes the modal, or clicking outside the body, or the close button, the index 0 must be set, otherwise, if any click occurs, the set option should remain (no action is executed).

    
asked by anonymous 22.10.2017 / 00:26

1 answer

1

As explained in the chat, you have the following conditions:

  • 1st when selecting the motorized option the modal with the two options is opened
  • 2º if the user does not click on any option at the first moment and simply close the modal the input select is reset.
  • 3rd case the user clicks on any of the options that is modal, the motorized option is set and the modal is closed
  • 4th after clicking on any of the options in the modal is created a button "called" Exchanging, that opens the modal again
  • 5º from that moment, as the option "Motorized" will already be selected, if it simply close the modal again it should NOT be reset

Result: 

$(document).ready(function(){
var setarZero="0";
var noBodyFunction="0";
  $('select').on('change', function () {
    if ($(this).val() == "Motorizado") {
        $('#modalEscolhaAc').modal('show');
    }else{
        $("#trocarAc").hide();
        setarZero = ($("#acionamento").prop('selectedIndex'));
    }
  });

  $("#escolherComp, #escolherKIT").on('click', function () {
    $('#acionamento').prop('selectedIndex', 7);
    $("#trocarAc").show();
    setarZero=7;
      if ($(this).attr('id') == 'escolherComp') {
         alert("Componente!");
      } else if ($(this).attr('id') == 'escolherKIT') {
         alert("KIT!");
      }
  });
  
  $("#trocarAc").on('click', function () {
	   $('#acionamento').prop('selectedIndex', 7);
	   noBodyFunction="1";
  });

  if(noBodyFunction!="1"){
    $("body").click(function() {
	  target = document.getElementById("modal-footer");
	  flag = event.path.some(function(el) {
	     return (el == target)
	  });
	    
	  if ((!flag)&&(setarZero !="7")) {
	     $('#acionamento').prop('selectedIndex', setarZero);
	  }
    });
  }	     

});	
    #escolherKIT{
       background-color: #d3e5f2;
       margin: 3px; padding: 3px;
       height:30px;
       width:200px
    }
    #acionamento{
	   width:190px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--Modal--><divid="modalEscolhaAc" 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" style="color:#000">Acionamento motorizado</h4>
	    </div>
	    <div id="modal-footer" class="modal-footer">
	        <input type="button" name="escolherComp" id="escolherComp" value="Escolher componentes para automação" data-dismiss="modal" class="btn btn-success">
	        <input type="button" name="escolherKIT" id="escolherKIT" value="Escolher KIT" data-dismiss="modal" class="btn btn-primary">
	    </div>
	</div>
    </div>
</div>
<!-- Fim modal -->
	
	
<select name="acionamento" id="acionamento" required="true" class="form-control">
	<option value="">Selecione um produto</option>
	<option value="Bilateral">Bilateral</option>
	<option value="Central">Central</option>
	<option value="Convencional">Convencional</option>
	<option value="Haste e corda">Haste e corda</option>
	<option value="Invertido">Invertido</option>
	<option value="Lateral">Lateral</option>
	<option value="Motorizado">Motorizado</option>
</select> <input type="button" value="trocar" id="trocarAc" onclick="$('#modalEscolhaAc').modal('show')" style="display: none;"/>
    
22.10.2017 / 08:40
Error installing pyaudio and pocketsphinx Create tray dynamically