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只返回第一个元素。因此，您可以按班级$('.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 forloop的flask func的调用

2 个答案: