javascript - 设置按钮按下功能以触发带有 Id 的 Ajax 调用

Question

我正在尝试找出设置包含 Ajax 调用的页面的最简单方法。

我的主要问题是我可以编写页面，但是当涉及到绑定(bind)用户单击按钮时运行的事件时，我很难想出一种将 id 传递给函数以进行调用的好方法然后返回到被按下的 DOM 元素，让用户知道它已成功。

我创建了一个非常简单的 jsFiddle 来显示问题:

HTML:

<ul id="list"></ul> 

Javascript:

var Data = [{"id":1,"name":"a"},{"id":2,"name":"b"},{"id":3,"name":"c"}];

function dothething(id){
    alert("load the ajax - but how to get the back to the element that was clicked?")    
}

for (i=0;i<Data.length;i++){
   $("#list").append(
       $("<li></li>")
           .text(Data[i].name)
           .click(function(){
               alert("How to get the id?")
               id = 1
               dothething(id)
           })
       )
}

http://jsfiddle.net/wqorcwjq/1/

完成此示例的最简单方法是什么？

Answer 1

您一开始就没有设置 ID 来获取它。 :)

使用.attr("id", Data[i].id)设置ID。

使用事件委托(delegate)来处理动态添加的li元素的点击事件。

Updated jsFiddle

JS:

var Data = [{"id":1,"name":"a"},{"id":2,"name":"b"},{"id":3,"name":"c"}];

function dothething(id){
    alert("load the ajax - but how to get the back to the element that was clicked?")    
}

for (i=0;i<Data.length;i++){
    var li = $("<li></li>").text(Data[i].name).attr("id", Data[i].id);  // set li text and ID here
   $("#list").append(li);
}

// Event delegation
$(document).on("click", "li", function(){
    alert($(this).attr('id'));
    dothething($(this).attr('id'));
});

阅读:

• .attr() | jQuery
• Understanding Event Delegation | jQuery Learning Center