7

Necesito pasar un parametro a una funcion de JS pero:

al ejecutar este codigo, llama a la funcion antes de clickear y ademas no pasa el parametro

/*Este es el codigo AJAX al que quiero agregarle el parametro*/

$('#atribute').on('click',comprobar("hola"))

function comprobar(parametro){
  alert("Este parametro es: ",parametro);
}
<!--***Este es el input***-->

<input id="atribute" type="text"  title="Precio">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
">
</script>

7
  • Eso, tal cual lo tienes, te va a saltar el alert nada mas hacerle click al input. Si lo que quieres es que la alerta salte después de teclear en el input, se me ocurren dos formas (en vez del click): a) evento keyUp b) evento focusOut
    – Vera Canet
    el 17 may. 2018 a las 13:09
  • Si, pero lo que queria saber es, ¿como pasar el parametro? el 17 may. 2018 a las 13:12
  • En este caso, para pasarle el valor del input como parámetro, deberías capturarlo con $('#atribute').val(); Con eso lo meterías en una variable y esa variable la pasas a tu función para mostrarla en el alert
    – Vera Canet
    el 17 may. 2018 a las 13:13
  • Quieres que al hacer click en el input muestre la alerta? el 17 may. 2018 a las 13:13
  • la función comprobar tiene un parametro llamado (parametro), quiero que el Event Handler de JQuery llame a la funcion y agregue el parametro suponiendo que ya lo tengo el 17 may. 2018 a las 13:14

7 respuestas 7

6

En tu caso tienes mal la sintaxis de ejecución de función y ademas no estás concatenando bien en el alert. La solución a tu problema sería:

 $('#atribute').on('click',function(){
    comprobar("hola");
  });



function comprobar(parametro){
  alert("Este parametro es: "+parametro);
}
<input id="atribute" type="text"  title="Precio">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
">
</script>

Donde para ejecutar el evento on "click" primero debes hacer que reconozca el evento click como función para que ejecute las demás.

2

El segundo parametro de la funcion .on() recibe la referencia de una funcion mientras que tu le envias el resultado de la una funcion, que obviamente, no es lo mismo.

Una forma de lograr lo que deseas es agregando un atributo a tu elemento, una vez le hagas clic al boton, lees el atributo y se lo envias a la funcion:

$('#atribute').on('click',function(){
    // la funcion .data() lee el atributo data-valor
    comprobar($(this).data("valor"));
});

function comprobar(parametro){
  alert("Este parametro es: " + parametro);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" 
id="atribute" 
data-valor="hola"
value="Mostrar valor" />

2

El problema es porque estas ejecutando la función en ves de pasarle la definición de una función para que al ejecutarse el evento se llame tu función.

let $input = $('#unID')

let miFuncion =  function()
{ 
  console.log('Arguments 1:', arguments, 'this:', this); 
  alert('Funciona el evento 1')
}

let miArrowFunction = () => { 
  alert('Funciona el evento 2')
}

console.log('$input:', $input)

//Agregamos el evento click
$input.on('click', miFuncion)
$input.on('click', miArrowFunction)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="unID" type="text"/>

1

Habiendo visto las otras soluciones, también te ofrezco la siguiente, en el que en el método .click() le pases los parámetros como objeto.

$('#atribute').click({say: 'hola'}, comprobar);

function comprobar(event) {
  alert("Este parámetro es: " + event.data.say);
}

También lo puedes hacer con el .on():

$('#atribute').on('click', {say: 'hola'}, comprobar);

function comprobar(event) {
  alert("Este parámetro es: " + event.data.say);
}
1
  • Es mucho mas estructurado, gracias. el 17 may. 2018 a las 13:34
1

con jquery para pasarle funciones a un evento se hace por medio de callbacks.

En esta función usa + para concatenar los dos string dentro del alert.

function comprobar(parametro){
  alert("Este parametro es: "+parametro);
}

en este caso use notación de flecha ()=>{} para el callback pero tambien se puede usar la notación function(){}, lo importante es que el código que queremos ejecutar valla dentro de los {}

$('#atribute').on('click',()=>{
    comprobar("hola")
})

Si quicieras hacer lo mismo con javascript podrías pasarle directamente la función:

var boton= document.querySelector('#atribute');
boton.setAttribute('onclick','comprobar("holas")');

https://developer.mozilla.org/en-US/docs/Glossary/Callback_function

1

El problema que tienes es que el parametro que pasas al alert no lo estás tomando en cuenta con la sintaxis de javascript. Fijate en tu código:

function comprobar(parametro){
  alert("Este parametro es: ",parametro);
}

Para tu mostrar un string concatenado con una variable javascript lo correcto es "string"+variable. Así:

function comprobar(parametro){
      alert("Este parametro es: "+parametro);
    }

Aquí tienes tú código con la corrección:

/*Este es el codigo AJAX al que quiero agregarle el parametro*/

$('#atribute').on('click',comprobar("hola"))

function comprobar(parametro){
  alert("Este parametro es: "+parametro);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--***Este es el input***-->

<input id="atribute" type="text"  title="Precio">

1
  • Gracias todos me sirvieron. el 17 may. 2018 a las 13:30
1

Esta es una de las muchas posibles soluciones a tu duda:

   function comprobar(event, arg) {
      console.log(event, arg);
    }

    element.on('click', (event) => comprobar(event, 'Here comes the argument'));

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.