使用 jquery 和 ajax 在 Jinja 中处理 href

Question

我通过按顺序循环每个项目来显示名为 workshop 的变量中提供的项目列表

{% for car in workshop %}
    <div id="newDiv" >
    <a class="carsInWorkshop" title = "{{car.carId}}" href="./getPriceforCar/{{car.carId}}">{{ car.carType }}</a>    
    </div>
{% endfor %}

当有人点击带有超链接的项目时

项目 1

项目 2

项目 3

然后直接将 href 调用路由到我的烧瓶应用程序，我想进行 ajax 调用，并处理结果

$(".carsInWorkshop").click(function(event) {
        event.preventDefault();
        console.log($(".carsInWorkshop").attr('href'));
        loadPrice($(".carsInWorkshop").attr('href'));
    });

 loadPrice = function(link, callback) {
   console.log('loading price for ' + link);
    $.ajax({
       type: "GET",
       url: link,
       cache: false,
       xhrFields: {
         withCredentials: true
       },
       success: function(data) { 
        $('div#pop-up-price').show();
        $('#carId').val(data.price);  
       }
    });
 }

但是，出于某种原因，每当我单击项目 2 或项目 3 时，结果始终显示为项目 1 的 href。 href 始终包含第一项的 carId。

如果我将调用直接路由到 Flask，我会根据项目点击获得正确的 carId。所以，似乎 jquery 的处理不正确。
在 Jinja 工作以从 "for loops" 访问 href 时，是否对 jquery 进行了特殊处理？

Answer 1

问题是 $(".carsInWorkshop") 总是 returns 3 个元素和 .attr returns 第一个元素的 href

我有一个工作样本here

通过使用 event.target，您可以确保检索到正确的元素，在本例中是用户单击的元素。

尽管这可行，但我还是建议您将该类型存储在其他地方。而是将 href 更改为 "" 并使用 jquery data 将类型直接附加到元素，以便以后可以轻松检索它。

$('#card-type-type1').data('type', '<some_type>')

$(event.target).data('type')

您可以将它放在 jinja 的脚本块中

编辑: 我已经更新了 jsfiddle 和示例代码

使用 jquery 和 ajax 在 Jinja 中处理 href

Handling href in Jinja with jquery and ajax

ajax

jquery

jinja2