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

Question

所以我通过 AJAX GET 方法从后端获取数据，并将其呈现在 html 列表中(如下)。我尝试将按钮标签放在那里，并在列表中找到了按钮，但我不确定如何使用委托(delegate)和其他人来使其工作。

那么我如何放置独立的按钮，将用户发送到该列表中有关自助餐厅的详细信息页面？ (这只是一个个人项目)

$(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 接口(interface)。 (jQuery 有一个)。
• 不要使用 HTML 字符串构建交互式 DOM 元素。这使得向其附加事件变得困难。一个异常(exception)是使用事件委托(delegate)，在您的示例中，这是一种更好、性能更好的方法。

你应该分解你的问题空间。将关注点分成更小的 block 。

获取 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);
  });
}

附加委托(delegate)事件:

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