Ссылка на тег привязки в ajax

Question

Я получаю Array элементов с jinja2 из базы данных в теге <a>, item [0] представляет идентификатор, а item [1] является атрибутом (например, имя).
Я хотел бы сделать ссылку на идентификатор в моем вызове ajax, поэтому, если я нажимаю что-либо в моем anchortag, это делает ссылку на идентификатор, теперь, когда я щелкаю что-либо в моем anchortag, все просто работает без ссылки на ID

HTML

{% for item in people %}
   <a id="foo" class="foo">{{item[1]}}</a>
{% endfor %}

JAVASCRIPT / AJAX

{% for item in people %}

$(".foo").click(function(evt) {
$.ajax({
 url: "/~s6/cgi-bin/people.py",
 async: true,
 type: "post",
 datatype:"json",
 data: {'peopleid': {{item[0]}}},
      success: function(result) {
        console.log(result)
        //console.log(result.peopleinfo.surname)
       // console.log(result.peopleinfo.othernames)
        console.log(result.familyinfos)

         html = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Old Name</th><td>" + result.peopleinfo.surname  + "</td></tr>"' + "<table>"

$('#infoTab').html(html)

 $("#placenameModal").modal("show");
      }

  });


  });
 {% endfor %} 

Answer 1

Вы можете добавить необходимую информацию в data атрибутах.

{% for item in people %}
    <a id="foo" class="foo" data-people-id="{{item[1]}}" data-people-name="{{item[1]}}">{{item[1]}}</a>
{% endfor %}

Тогда просто получите нужные данные при нажатии на якорь.

function anchorClickHandler(evt) {
    var anchor = $(this)[0];                    // get the anchor DOM element, unwrapped from jQuery
    var peopleId = anchor.dataset.peopleId;     // get the peopleId from the data attribute
    var peopleName = anchor.dataset.peopleName; // you can do the same with the name, if you want
    $.ajax({
        url: "/~s6/cgi-bin/people.py",
        async: true,
        type: "post",
        datatype: "json",
        data: {
            'peopleid': peopleId,   // pass in the peopleId from the specific anchor that was clicked.
        },
        success: function(result) {
            console.log(result)
            // console.log(result.peopleinfo.surname)
            // console.log(result.peopleinfo.othernames)
            console.log(result.familyinfos)

            html = '<table class="table table-striped table-bordered table-condensed">' +
                        '<tr>' +
                            '<th>Old Name</th>' +
                            '<td>' + result.peopleinfo.surname + '</td>' +
                        '</tr>' +
                    '</table>'

            $('#infoTab').html(html)
            $("#placenameModal").modal("show");
        }

    });
}

$(".foo").on('click', anchorClickHandler);

Также неплохо определить ваши обработчики вне фактического назначения.
Если бы вы определяли ваши обработчики в цикле, то вместо вашего обработчика связывалась бы копия вашего обработчика.

Хотя вы не заметите разницу на небольших страницах, она не масштабируется вообще и может повлиять на производительность на больших страницах.

Answer 2

Возможно что-то вроде этого:

HTML

{% for item in people %}
   <a id="{{item[0]}}" class="foo">{{item[1]}}</a>
{% endfor %}

Javascript

$(document).on('click', '.foo', handleClick)
function handleClick(e) {
  $.ajax({
    url: "/~s6/cgi-bin/people.py",
    type: 'POST',
    data: {
      peopleid: $(this).attr('id')
    },
    success: handleModal
  })
}
function handleModal(response) {
  // Do stuff here with your response
}