How to implement onClick function with parameters using jquery

Question

I have a web-page that can be used to highlight streets in my local area on a street map. The user clicks on the name of the street they are looking for and the street gets highlighted on a map. See http://www.fastmap.eu for working example.

Each street name is displayed as a button and when the user clicks on the button, 3 variables are stored for use in the map.

Currently, button clicks are handled in html by the onClick function, but it doesn't work on some touch screen devices. So I want to use jQuery .on('click tap', function() instead but don't know how to pass the variables.

The html for each button looks similar to this:-

    <button class="btn" onClick="storeData(value1,value2,value3);location.href='map.html';">Street Name</button>

Previous answers of a similar nature explain how to pass parameters from on script function to another, but not from the html code and don't show how it is implemented in html.

possible duplicate of [jquery .click pass parameters to user function](http://stackoverflow.com/questions/3273350/jquery-click-pass-parameters-to-user-function) — KAD, Sep 18 '15 at 22:09

score 11 · Accepted Answer · answered Sep 19 '15 at 00:13

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>

score 0 · Answer 2 · answered Sep 18 '15 at 22:10

You can get the element (and then its data) by doing something like this:

HTML:

    <button class="btn" data-somedata="whatever">Street</button>

JS:

    $("body").on("click tap", ".btn", function(event) {
      var $target = $(event.target);
      var somedata = $target.data("somedata");
    });

Hope that helps =)

score 0 · Answer 3 · answered Sep 18 '15 at 22:44

HTML button definition:

<button class="btn" id="btn">Street Name</button>

JQuery code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script language="javascript">
    $(document).ready(function() {
        $('#btn').on('click', storeData);   
    });

    function storeData() {
        alert ("here check value1, value2, value3");        
        location.href='map.html';
    }   
</script>

score 0 · Answer 4 · answered Sep 19 '15 at 18:25

For me, the best answer was given by Elias Nicolas but slightly modified. Rob Perry's solution looks as though it would work too, but as they say - if its not broke, don't fix it. SkyMaster's solution didn't explain how I would get the variable from the html code to the javascript - I have hundreds of button's, each with different variables to be passes to the script. Also, because I have hundreds of buttons, I couldn't use id="btn". Instead I just used button.

The final solution was as shown below:-

$(document).ready(function() {
    $('button').on('click tap', function (e) {
     alert("Your values are :"+ $(this).data("value1")+","+$(this).data("value2")+","+$(this).data("value3"));        
    });   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-value1="1" data-value2="2" data-value3="3">Street Name</button>

How to implement onClick function with parameters using jquery

4 Answers4