Select 项 jquery 由 jinja2 生成

Question

我将这段代码放在一个正在调用的模板中，正如您在图像中看到的那样，项目已正确生成，但是当我尝试获取

标签的文本时，它总是返回 'Heineken' 这是 Jinja for 循环生成的第一项。

All the items

<div class="btn-toolbar" id="product-group" style="text-align: center; border: 2mm;">
    {% set path = './photos/' %}
    {% for row in product %}
    <a href="" id='clickable-product' class="border underline-on-hover box" style="margin:0 auto !important;  margin-top: 5px !important; color: inherit; text-decoration: none;">
        <div class="mt-1" style="display:block;" id='product'>
            <img src="https://www.drinkstuff.com/productimg/118462_large.jpg" alt="Girl in a jacket" width="200" height="200">
            <p id="product-info" style="margin-right: 3px;">{{row[1]}}</p>
        </div>
    </a>
    {% endfor %}
</div>

<script>
    $(document).ready(function(){
        $("#product-group a").click(function(){
            alert($('#product-info').text());
        })

    })
</script>

所以如前所述，无论我点击哪个数字，它都会提示消息'Heineken'

Answer 1

JQuery 将 select 它在 DOM 中找到的第一个 ID。而是使用：

$(document).ready(function(){
  $("#product-group a").click(function(){
    alert($(this).find("#product-info").text());
  })
})

Select 项 jquery 由 jinja2 生成

Select items with jquery that are generated by jinja2

html

python

jquery

jinja2