on('change') shoot every click

Asked

Viewed 354 times

5

How do I so that every time I choose an option it fires an event. In the example below it is already with the selected One. I wanted even if I choose him again he shoots without having to trade between one and the other

$('select').on('change', function() {
  alert( this.value );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

jquery

3 answers

3

You can listen to the click on select event, but this event is triggered before selecting any option. If you want to put so that something is done as soon as the user has chosen an option, even if it is the previous one or even a click outside of select, you can use the script below:

let gatilho;
$(document).click(function(){
  if (gatilho){
    gatilho=false;
    alert( $('select').val() ) //colocar aqui sua ação;
  }
});

$('select').click(function(e) {
  e.stopPropagation();
  if (gatilho) {
    alert( $(this).val() ) //colocar aqui sua ação;
    gatilho=false;
  } else {
    gatilho=true;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

  • In the first example, when changing option, the two events are triggered, showing the alert twice.

  • Truth @Jorgematheus, better put the action to be taken on srcript itself without having to fire another event. I changed the answer.

  • Now it’s OK! + 1

2


It is very simple to do this action, I will explain briefly how the events related to mouse, ex:click or change. Whenever using a Jquery event the framework itself puts in the callback Function(Event) an object with all the methods and parameters you can work with. An object that you can use is the so-called timestamp, it returns you how long the event took, when you click on an object on the screen the framework takes time to identify the object data, but once loaded, when your combobox is open, click takes 0 seconds because Jquery has read the data before. I don’t know if you got it right but once it’s loaded, just check if the timestamp is 0, then you can get the data clicked. See the example working below.

$(function() {
        $('#dados').click(function(event) {
            if (event.timeStamp == 0) {
                var dados = $(this).val();
                alert(dados);

            }
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dados">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

I hope I’ve helped.

  • Because you used $(function() { at the beginning of the function being that just listening to the click on #dados Does it work? I’ve seen a lot of people do it but I don’t know why...

  • 1

    I already found out here: https://stackoverflow.com/questions/7642442.

  • 1

    Laércio blz? about $(Function(){ the Framework understands that the whole page document was loaded and then after that it performs this function showing to be prepared to fill all the components of the screen. it is very important you use it to ensure that the entire page will be loaded.

  • Thanks Cleiton, after researching I found out it’s a shortcut to $(document).ready( function() { }).

  • Thanks for the help Cleyton!

1

Various forms, here are some of them

var valorAntigo = null;
$('select').click(function(){
  s = $(this);
  val = s.val();
  if (valorAntigo == null) {
      valorAntigo = val;
  } else {
      valorAntigo == s.val() ? alert('mesmo option valor = '+ this.value) : alert('outro option valor = '+ this.value);
      valorAntigo = null;      
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

OR

$(function () {
    var cc = 0;
    $('select').click(function () {        
        cc++;
        if (cc == 2) {
            $(this).change();
            cc = 0;
        }         
    }).change (function () {
        alert(this.value);
        cc = -1;
    });      
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.