Question

所以我通过AJAX GET方法从后端获取数据，并在html的列表（下面）中显示它。我试着把按钮标签放在那里，我得到了列表上的按钮，但我不确定如何使用代表和其他人来使其工作。

那么如何将用户发送到关于该列表中自助餐厅的详细信息页面的独立按钮？（这只是个人项目）

$(function(){

    var $cafeterias = $('#cafeterias');
    var $Name = $('#CName');
    var $Location = $('#CLocation');


    function DispCafeteria(cafeteria) {
      $cafeterias.append('<li> Name: '+cafeteria.Name+'Location: '+cafeteria.Location+'<button id="Details">Details</button>'+'</li>');
    }

    $.ajax({
        type: 'GET',
        url: 'some url',
        success: function (cafeterias) {
              $.each (cafeterias, function (i, cafeteria){
                DispCafeteria(cafeteria);
              });
        },
        error: function() {
          alert('Error while loading cafeterias');
        }

      }); 
});

Answer 1

一些挑剔：

除非您计划实例化（构造函数），否则不要使用大写字母命名函数。它使人们感到困惑，因为这是事实上的普遍标准。
避免使用嵌套回调逻辑。请改用promise接口。（jQuery有一个）。
不要使用HTML字符串构建交互式DOM元素。这使得很难将事件附加到它上面。一个例外是使用事件委托，在您的示例中，这是一种更好的方法。

你应该打破你的问题空间。将问题分成较小的块。

获取AJAX数据：

function fetchData() {
  return $.ajax({
    type: 'GET',
    url: 'some url'
  });
}

处理错误：

function handleErrors(err) {
  alert('Error while loading cafeterias');
}

构建DOM：

function cafeteriaToString(cafeteria) {
  return 'Name: ' + cafeteria.name +
    ' Location: ' + cafeteria.location;
}

function constructDataTable(cafeterias) {
  $.each(cafeterias, function (i, cafeteria) {
    var $button = $('<button/>')
      .text('Details')
      .data('details-id', i);
    $('<li/>')
      .text(cafeteriaToString(cafeteria))
      .append($button);
  });
}

附加委托活动：

function handleButtonClicks(e) {
  var detailsId = $(this).data('details-id');
  // Do something with detailsId
}

全部放在一起：

function init() {
  fetchData()
    .then(constructDataTable)
    .fail(handleErrors);

  $('ul').on('click', 'li>button', handleButtonClicks);
}

如何在Jquery中的每个数据行的末尾添加独立按钮

1 个答案: