How to pass a personized function within a Jquery Change event?

Asked

Viewed 184 times

2

Good morning I wonder if it is possible to do this inside Jquery:

$(document).ready(function() {
  $("select").change(teste());
  
  function teste() {
    alert($("select").val());
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value="1">valor 1</option>
  <option value="2">valor 2</option>
  <option value="3">valor 3</option>
</select>

apparently he can call the event at the time of execution, but by changing the value of the select.

jquery

  • What result do you want to get? Explain better.

  • 1

    use $("select").change(teste); instead of $("select").change(teste());.

  • It worked Benilson, but what if I want to send a video to my function, how would I do it? for example: $("select").change(teste('par1'));

  • Uses an anonymous function by receiving the parameter and running internally teste(parametro).

3 answers

3


Problem

When you do that:

$("select").change(teste());

You run the "test()" and pass to the "change" function the test return, so the "change" event does nothing.

Solution

Passing only "test" you actually pass the function to "change".

$(document).ready(function() {
  $("select").change(teste);
  
  function teste() {
    alert($("select").val());
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value="1">valor 1</option>
  <option value="2">valor 2</option>
  <option value="3">valor 3</option>
</select>

  • and how to pass a parameter to the test function?

  • Do not customize the parameter, you can see in documentation that the only parameter is "Event", ie you have to work with it, and inside you can call another function or do as you did selecting the element itself.

  • 1

    @Wictorchaves is possible yes. The documentation itself says how. I drafted an answer to complement. Tmj

  • 1

    @Lipespry Mass! Living and learning +1

2

It is possible yes. See what it says to jQuery change method documentation.

Example #1 - passing function name:

function teste(ev){
    alert($("select").val());
}

$(document).ready(function() {
    $("select").change(teste); // aqui passo o nome da função a ser executada
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
    <option value="1">valor 1</option>
    <option value="2">valor 2</option>
    <option value="3">valor 3</option>
</select>

Example #2 - anonymous function:

$(document).ready(function() {
    $("select").change(function(ev){ // pode ser arrow function também: (ev) => alert($("select").val());
        alert($("select").val());
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
    <option value="1">valor 1</option>
    <option value="2">valor 2</option>
    <option value="3">valor 3</option>
</select>

Example #3 - passing function-specific data: 

$(document).ready(function() {
    $("select").change(
        'Você selecionou o valor: ', // aqui eu defino o que quero passar pra função
        (ev) => alert(ev.data+$("select").val())  // com ev.data eu recupero o que passei por argumento
    );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
    <option value="1">valor 1</option>
    <option value="2">valor 2</option>
    <option value="3">valor 3</option>
</select>

Note that passes to string 'Você selecionou o valor: ' which could be any other type, such as an object, for example...

1

You can do this by passing the event to an anonymous function along with parameters:

$(document).ready(function() {
  $("select").change("param", teste);
  
  function teste(event) {
    console.log("Valor selecionado:", $("select").val());
    console.log("Parâmetro:", event.data);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value="1">valor 1</option>
  <option value="2">valor 2</option>
  <option value="3">valor 3</option>
</select>

The parameter is passed in the property .data event, which could also be an array or an object:

$(document).ready(function() {
  $("select").change(['a','b'], teste);
  
  function teste(event) {
    console.log("Valor selecionado:", $("select").val());
    console.log("Parâmetro em forma de array:", event.data);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value="1">valor 1</option>
  <option value="2">valor 2</option>
  <option value="3">valor 3</option>
</select>

Browser other questions tagged jquery

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