javascript - Using .click instead of onclick and getting a variable value - Stack Overflow

admin管理员组

文章数量:1345011

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?

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?

• javascript
• jquery

Share Improve this question Follow asked Aug 28, 2013 at 12:54 ibanoreibanore 1,50011 gold badge1212 silver badges2525 bronze badges

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 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

<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'));
})

<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'))
})
})

I remend giving a class to the dynamically loaded elements, then use jquery .on(http://api.jquery./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).

<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'));
});

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

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/puL95/

try this.

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

本文标签： javascriptUsing click instead of onclick and getting a variable valueStack Overflow