Jquery's .Click - Pass Parameters to User Function

jQuery's .click - pass parameters to user function

For thoroughness, I came across another solution which was part of the functionality introduced in version 1.4.3 of the jQuery click event handler.

It allows you to pass a data map to the event object that automatically gets fed back to the event handler function by jQuery as the first parameter. The data map would be handed to the .click() function as the first parameter, followed by the event handler function.

Here's some code to illustrate what I mean:

// say your selector and click handler looks something like this...
$("some selector").click({param1: "Hello", param2: "World"}, cool_function);

// in your function, just grab the event object and go crazy...
function cool_function(event){
    alert(event.data.param1);
    alert(event.data.param2);
}

How can I pass arguments in .click() function?

You can use trigger()'s extraParameters to pass additional parameters to your handler:

From the trigger() documentation:

extraParameters Type: Array or PlainObject Additional parameters to
pass along to the event handler.

Example (also from the documentation):

$( "#foo" ).on( "custom", function( event, param1, param2 ) {
  alert( param1 + "\n" + param2 );
});

$( "#foo").trigger( "custom", [ "Custom", "Event" ] );

How to implement onClick function with parameters using jquery

If I understand correctly you want something using jQuery.data() For example: you could set different values to the function from the html.
Hope it helps.

See this snippet:

$(document).ready(function() {    $('#btn').on('click', function (e) {     alert("Your values are :"+ $(this).data("value"));            });   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button id="btn" data-value="1">Street Name</button>

How do I pass parameters into a jQuery.click() function on a span tag?

Looks like you should try something like this:

$(document).on("click", "#example", function() {
  console.log('Hello World');
});

Using the function() definition alone give me Uncaught SyntaxError: Unexpected token (.

What you're doing is binding an anonymous function to the click. If you were doing this somewhat differently, like MyFunction(), then it would only execute the function.

If you had MyFunction you could still trigger it using click like so:

function MyFunction() {
  console.log('Hurra!')
}

$('#example').click(MyFunction)

Notice that I didn't use the parentheses otherwise it will actually run the function instead of binding it.

How to programmatically click a button and pass arguments using jQuery?

Use trigger(event, data)

$(document).ready(function() {
  $("#btnAdd").on("click", function(event, data) {
    if (data) {
      console.log('Data sent', data.sizes);
    }else{
      console.log('No data')
    }
  });
});

$(document).ready(function() {
  $("#sel").change(function() {
    var sizes = ['11', '12'];
    $("#btnAdd").trigger('click', {sizes: sizes});
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnAdd">click me</button>
<br/>
<label>Check to send data <input type="checkbox" id="sel" /></label>

How to pass argument to a jquery function through an onClick event?

Try using the .click syntax as .click( [eventData], handler(eventObject) ).

See below,

//                    v- Pass data
$('#topleft').click({x:x}, function (event) {
    loadPopupBox();
    $("#popupinner").load('getdetail.php?id=' + event.data.x); //read data from event obj
});

The [eventData] x can be accessed as event.data.x

Pass parameter(s) to click event in jQuery

Custom parameter comes as second argument, so I have fixed a bit your code:

 $("#btnAddMicroElement").click(function (microelement, text) {

    $("#divVerification").append("<div class='clsdivmicroelement'><label>Microelement</label><input type='text' class='clstxtmicroelement'/ value="+text+"><input type='button' class='clsbtnmicroelmentadd' value='Add'/></div>");
    return false;
});

Please look to this fiddle if it is what you need.

pass parameter to click event of a class

Try with data attributes: test code here

HTML

<div style="float:left">
  <div class="d-inline ">
    <i data-id="10" data-xx="other x" class="bi bi-reply icon-cursor test-comment" >some text</i> 
  </div>
</div>

Remove onclick= ... and use data-* for your info.

JS

$(".test-comment").click(function () {
    alert($(this).data("id"));
    alert($(this).data("xx"));
})

snippet <3

$(".test-comment").click(function () {
    alert($(this).data("id"));
    alert($(this).data("xx"));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="float:left">
  <div class="d-inline ">
    <i data-id="10" data-xx="other x" class="bi bi-reply icon-cursor test-comment" >CLICK ME!</i> 
  </div>
</div>

---

Related Topics