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.

Answer 1

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>