如何使用 jquery 处理从 jinja for 循环调用 flask 函数

Question

我想通过 jquery

在 jinja 模板的循环中处理对 flask func 的调用路由

<div id="tab1" class="tab active">
{% for example in examples %}
<a href="#">
    <span id="example_id" style="display:none">{{ example.example_id }}</span>
    <span id="example_name" style="display:none">{{ example.name }}</span>
    <span class="example" id="handleEx"><a href="#">{{ example.text}}</a></span>
 </a>
</div>

下面是我的 jquery 代码，但它只适用于第一个元素。单击下一个元素时没有任何反应。

$('#handleEx').each(function(){
    $(this).click(function(){
      event.stopPropagation();
      console.log("handle clicked");
      $.get( "/handleEx/" + $('#example_id').text() + "/" + $('#example_name').text())
        .done(function(data) {
          console.log('handled ok');
        });
    });
});

如何处理下一个元素的触发器？另外，我如何确保我读取的是下一个连续元素的 example_id 和 example_name 的值，而不是同一个

Answer 1

当您调用 $('#handleEx') 时，Jquery 仅 return 第一个元素。所以你可以通过 class $('.handleEx')

来调用

Answer 2

试试这个：

$('.linkClick').click(function(){
  event.stopPropagation();
  console.log("handle clicked");
  $.get( "/handleEx/" + $(this).closest("div").find("span[name='example_id']").html() + "/" + $(this).closest("div").find("span[name='example_name']").html())
    .done(function(data) {
      console.log('handled ok');
    });
});



<div id="tab1" class="tab active">
    {% for example in examples %}
    <a href="#">
        <span name="example_id" style="display:none">{{ example.example_id }}</span>
        <span name="example_name" style="display:none">{{ example.name }}</span>
        <span class="example" name="handleEx"><a href="#" class="linkClick">{{ example.text}}</a></span>
     </a>
    </div>

在一个页面中，id 应该是唯一的，这是标准。所以你可以多次使用 name 作为，但不应该使用 id。

如何使用 jquery 处理从 jinja for 循环调用 flask 函数

how to handle call to flask func from jinja forloop using jquery

jquery

jinja2