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 — KAD
– KAD, Commented Sep 18, 2015 at 22:09

Elias Nicolas · Accepted Answer · 2015-09-19 00:13:59Z

11

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>

answered Sep 19, 2015 at 0:13

Elias Nicolas

74014 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rob Perry · Accepted Answer · 2015-09-18 22:10:35Z

0

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 =)

answered Sep 18, 2015 at 22:10

Rob Perry

236 bronze badges

Comments

SkyMaster · Accepted Answer · 2015-09-18 22:44:16Z

0

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>

answered Sep 18, 2015 at 22:44

SkyMaster

1,3231 gold badge8 silver badges15 bronze badges

Comments

lobbag00 · Accepted Answer · 2015-09-19 18:25:44Z

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>

Collectives™ on Stack Overflow

How to implement onClick function with parameters using jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related