javascript - 使用 .click 而不是 onclick 并获取变量值

Question

我发现 onclick、mouseover 等内联/html 事件的使用越来越少，建议使用 Javascript 注册事件。

我目前有一些 HTML，例如:

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

效果很好，但我现在想在 HTML 中不使用“onclick”的情况下执行此操作，但仍然能够检索 ID 号。

<li>元素通过 AJAX 检索，当用户在输入框中键入内容时，它会查询数据库并检索数据，而无需加载页面。

当用户单击其中一个国家/地区时，它将运行 setLocationId函数，它只是简单地设置一个隐藏的 HTML 表单元素与所选国家/地区的 ID，这样我就可以在提交表单后使用它。

如何为这些 <li> 注册事件监听器国家及其 ID 总是不同的，并且会根据用户在框中输入的内容而变化？

Answer 1

使用数据属性来保存数字。在 onclick 事件中，读取被单击元素的属性。

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

示例:

JSFiddle