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号。

通过AJAX检索<li>元素，同时用户键入输入框，查询数据库并检索数据而不加载页面。

当用户点击其中一个国家/地区时，它将运行setLocationId功能，该功能只是设置一个隐藏的HTML表单元素，其中包含所选国家/地区的ID，因此我可以在提交表单后使用该功能。 / p>

当国家/地区及其ID始终不同并根据用户在框中输入的内容而改变时，如何为这些<li>注册事件监听器？

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

Answer 2

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

中的

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

Answer 3

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

Answer 4

我建议为动态加载的元素提供一个类，然后使用jquery .on（http://api.jquery.com/on/）方法将事件监听器注册到属于某个类的元素，甚至是那些以dinamically方式加载的元素。

然后你就可以读出存储在元素中的数据（以data-something属性的形式）。

Answer 5

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

Answer 6

当您注册活动时，您仍然可以使用此活动，该活动链接到HTML元素。

换句话说，你仍然可以做那样的事情

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

获取li标签的ID

Answer 7

您可以将事件处理程序附加到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/

Answer 8

试试这个。

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

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

8 个答案: