Question

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

我的主要问题是我可以编写页面但是当绑定用户单击按钮时运行的事件时，我很难想出一种将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。

使用事件委派来处理动态添加的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'));
});

电文读出：

Answer 2

您可以使用jquery的$.each功能。

$.each(Data, function(i, item){
     $("#list").append(
          $("<li></li>")
             .text(item.name)
             .click(function(){
                 alert(item.id);
                 dothething(item.id);
             })
     );
});

Answer 3

您可以使用data api存储id元素的li，然后在点击处理程序中使用相同的内容

var Data = [{
  "id": 1,
  "name": "a"
}, {
  "id": 2,
  "name": "b"
}, {
  "id": 3,
  "name": "c"
}];

function dothething(id) {
  alert("load the ajax - " + id)
}

for (i = 0; i < Data.length; i++) {
  $("#list").append(
    $("<li></li>", {
      text: Data[i].name
    }).data('id', Data[i].id).click(function() {
      var id = $(this).data('id')
      dothething(id)
    }))
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="list"></ul>

设置按钮按下功能以使用Id触发Ajax调用

3 个答案: