Using .click instead of onclick and getting a variable value

Question

I have seen that the inline/html events like onclick, mouseover etc are being used less and less and it is advised to register events using Javascript.

I currently have some HTML like:

<ul id="supported-locations">
    <li onclick="setLocationId(32);">Mexico</li>
    <li onclick="setLocationId(35);">Mongolia</li>
</ul>

Which works fine but I want to now do this without the "onclick" in the HTML but still be able to retrieve the ID number.

The <li> elements are retrieved via AJAX while the user types into an input box it queries the database and retrieve the data without loading the page.

When the user clicks on one of the countries it will run the setLocationId function which just simply sets a hidden HTML form element with the ID of the selected country so I can use that once the form is submitted.

How do you register an event listener for these <li>'s when the countries and their ID's will always be different and changing depending on what the user types into the box?

epascarello · Accepted Answer · 2013-08-28 12:56:28Z

3

Use a data attribute to hold the number. On the onclick event, read the attribute on the element that was clicked.

HTML:

<ul id="supported-locations">
    <li data-code="32">Mexico</li>
    <li data-code="35">Mongolia</li>
</ul>

JavaScript:

$("#supported-locations").on("click", "li", function() {    
    var li = $(this);
    console.log(li.data("code"));
});

Example:

JSFiddle

answered Aug 28, 2013 at 12:56

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

1 Comment

Mark Schultheiss Over a year ago

exactly what I would do, but you typed faster :)

Romaindr · Accepted Answer · 2013-08-28 12:57:47Z

3

<ul id="supported-locations">
    <li data-id="32">Mexico</li>
    <li data-id="35">Mongolia</li>
</ul>

in jQuery

$('#supported-locations').on('click','li',function(){
  setLocationId($(this).data('id'));
})

answered Aug 28, 2013 at 12:57

Romaindr

3111 silver badge7 bronze badges

Comments

Arun P Johny · Accepted Answer · 2013-08-28 12:57:23Z

2

<ul id="supported-locations">
    <li data-id="32">Mexico</li>
    <li data-id="35">Mongolia</li>
</ul>

jQuery(function(){
$('#supported-locations li').click(function(){
alert($(this).data('id'))
})
})

answered Aug 28, 2013 at 12:57

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Fazi · Accepted Answer · 2013-08-28 12:57:41Z

2

I recommend giving a class to the dynamically loaded elements, then use jquery .on(http://api.jquery.com/on/) method to register event listeneres to elements belonging to a class, even those that are dinamically loaded..

Then you could just read out the data stored in the element(in the form of data-something attributes).

answered Aug 28, 2013 at 12:57

Fazi

3,9884 gold badges30 silver badges24 bronze badges

Comments

N8FURY · Accepted Answer · 2013-08-28 12:57:45Z

2

<ul id="supported-locations>
    <li id="32">Mexico</li>
    <li id="35">Mongolia</li>
</ul>

//Jquery

$("#supported-locations > li").on('click',function(){
setLocationId($(this).attr('id'));
});

answered Aug 28, 2013 at 12:57

N8FURY

10.1k3 gold badges17 silver badges14 bronze badges

Comments

Nox · Accepted Answer · 2013-08-28 12:57:50Z

2

When you register your event, you still have the ability to use this, which is linked to the HTML element.

In other word, you still can do something like that

<li id="YOUR_ID">Mexico</li>

And get the id of the li tag

answered Aug 28, 2013 at 12:57

Nox

2461 silver badge10 bronze badges

Comments

Darren · Accepted Answer · 2013-08-28 12:56:07Z

1

You can attach an event handler to the li:

<ul id="supported-locations">
    <li id="location32">Mexico</li>
    <li id="location35">Mongolia</li>
</ul>

$("#supported-locations li").click(function() {
    alert($(this).attr("id"));
});

http://jsfiddle.net/puL95/

answered Aug 28, 2013 at 12:56

Darren

71.2k24 gold badges141 silver badges146 bronze badges

Comments

S. S. Rawat · Accepted Answer · 2013-08-28 12:57:19Z

0

try this.

 $("#supported-locations li").click(function() {
    alert("me")
    }

answered Aug 28, 2013 at 12:57

S. S. Rawat

6,1414 gold badges45 silver badges59 bronze badges

Collectives™ on Stack Overflow

Using .click instead of onclick and getting a variable value

8 Answers 8

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related