设置一个按钮按下函数来触发一个Id为的Ajax调用

Setting up a button press function to trigger an Ajax call with a Id

本文关键字：一个 Id 为的 调用 Ajax 按钮 设置 函数      更新时间：2023-10-03

我正试图找出最简单的方法来设置包含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/

完成这个例子最简单的方法是什么？

您一开始就没有设置ID来获取它。：）

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

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

更新的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
  • 了解活动委托|jQuery学习中心

您可以使用jquery的$.each函数。

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

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

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>

相关文章：