Same function for different events of different elements. jquery

0

I have several HTML elements that I want to execute the same function, in different mouseover, click, etc. events.

I did not want to repeat the same code for each of the elements. Example: here I apply in the change event of a select, but I want to apply for the mouseover event of a button, and the click of a link, that will do all this same. Do I have to copy all the code again? I do not have how to call this same code without having it repeated.

$('select[name=confirm]').change(function() {
  entradav =  $('input[name=fechaent]').val();
  salidav =   $('input[name=fechasal]').val();
  quartov =   $('select[name=quartos]').val();
  idv =       $('input[name=id]').val();           

  $("#modal-footer").delay(1000).queue(function(n) {      

  $("#modal-footer").html('<img src="./img/ajax-loader_blue.gif" />');

  $.ajax({
    type: "POST",
    url: "compruevaover.php",
    data: 'entrada=' + entradav + '&salida=' + salidav + '&quarto=' + quartov + '&id=' + idv,
    dataType: "html",
    error: function(){
          alert("error petición ajax");
    },
    success: function(data){                                                      
          $("#modal-footer").html(data);
          n();
    }
  }); 
});
    
asked by Sergio Cristiá 05.12.2018 в 16:58
source

3 answers

2

Yes you can, for that you have to use a function.

function hola() {
  alert('Hola');
}

$('.elemento').click(function() {
  hola();
});

$('.menu').click(function() {
  hola();
});

In this example I declare a function called hola . Which executes an alert. This function, which executes a block of code, I need to execute it in different scenarios, like clicking on different elements, hovering other elements, etc. In order to execute my function I need to call it with hola(); . This instruction indicates that the code block that is in the hola function will be executed.

In your scenario you need to put all the code you need to execute inside a function and send it to call in the different events where you need it.

    
answered by 05.12.2018 в 17:06
1

You can do it using on (), this captures multiple events:

$('#element, #element2').on('keyup keypress blur change', function(e) {
    // e.type este es el tipo de evento que ejecuta.
});

Or you can just call her for a function

$('select[name=confirm]').change(function() {
    evento();
})

$('select[name=confirm]').click(function() {
    evento();
})

 function evento(){
//Lo que quieres hacer
}

I hope I have helped you.

Source

  

link

    
answered by 05.12.2018 в 17:12
1

First we create a function called RealizarAccion()

function RealizarAccion()
{
    entradav =  $('input[name=fechaent]').val();
      salidav =   $('input[name=fechasal]').val();
      quartov =   $('select[name=quartos]').val();
      idv =       $('input[name=id]').val();           

      $("#modal-footer").delay(1000).queue(function(n) {      

      $("#modal-footer").html('<img src="./img/ajax-loader_blue.gif" />');

      $.ajax({
        type: "POST",
        url: "compruevaover.php",
        data: 'entrada=' + entradav + '&salida=' + salidav + '&quarto=' + quartov + '&id=' + idv,
        dataType: "html",
        error: function(){
              alert("error petición ajax");
        },
        success: function(data){                                                      
              $("#modal-footer").html(data);
              n();
        }
      }); 
}

then we invoke this function in our events

$('#boton').click(function() {
  RealizarAccion();
});

or

$('select[name=confirm]').change(function() {
  RealizarAccion();
}

I hope this helps you, Regards.

    
answered by 05.12.2018 в 21:01