Call functions with JavaScript parameters with Ajax $ ('Element') on ('click', func (param))

7

I need to pass a parameter to a JS function but:

  

when executing this code, call the function before clicking and also do not pass the parameter

/*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>
    
asked by Cesar Velasquez 17.05.2018 в 15:05
source

7 answers

5

In your case you have the function execution syntax wrong and also you are not concatenating well in the alert. The solution to your problem would be:

 $('#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>

Where to execute the event on "click" you must first make it recognize the click event as a function so that it executes the others.

    
answered by 17.05.2018 / 15:21
source
2

The second parameter of the function .on() receives the reference of a function while you send it the result of the one function , which obviously is not the same.

One way to achieve what you want is to add an attribute to your element, once you click on the button, read the attribute and send it to the function:

$('#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" />
    
answered by 17.05.2018 в 15:22
2

The problem is because you are executing the function instead of passing the definition of a function so that when the event is executed your function is called.

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"/>
    
answered by 17.05.2018 в 16:15
1

Having seen the other solutions, I also offer you the following, in which in the method .click() you pass the parameters as object.

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

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

You can also do it with the .on() :

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

function comprobar(event) {
  alert("Este parámetro es: " + event.data.say);
}
    
answered by 17.05.2018 в 15:25
1

with jquery to pass functions to an event is done through callbacks.

In this function use + to concatenate the two string inside the alert.

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

in this case use arrow notation ()=>{} for the callback but you can also use the notation function(){} , the important thing is that the code we want to execute fence within the {}

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

If you wanted to do the same with javascript, you could directly pass the function to it:

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

link

    
answered by 17.05.2018 в 15:33
1

The problem you have is that the parameter you pass to the alert is not taking it into account with the javascript syntax. Look at your code:

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

To show a string concatenated with a javascript variable, the correct thing is "string" + variable. So:

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

Here is your code with the correction:

/*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">
    
answered by 17.05.2018 в 15:20
1

This is one of the many possible solutions to your question:

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

    element.on('click', (event) => comprobar(event, 'Here comes the argument'));
    
answered by 18.05.2018 в 12:53