Question

我从一个Array标签的数据库中获得一个jinja2的{{1}}个项目，item [0]代表一个id，而item [1]是一个属性（例如名称）。
我想在我的<a>呼叫中引用ID，因此，如果我在ajax中单击任何内容，它都会引用ID，现在一旦我在anchortag中单击任何内容，所有内容只是在没有引用id的情况下运行

HTML

anchortag

JAVASCRIPT / AJAX

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

Answer 1

也许是这样的：

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
}

Answer 2

您可以在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);

在实际任务之外定义处理程序也是一个不错的主意。
如果要在循环中定义处理程序，则将绑定处理程序的副本，而不是绑定处理程序本身。

虽然您不会在较小的页面上注意到差异，但是它根本无法很好地扩展，并且会影响较大页面上的性能。

引用ajax中的锚标记

2 个答案: