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项时，将始终显示Item1的href结果。 href始终包含第一项的carId。

如果我直接将呼叫路由到烧瓶，我会根据项目点击获得正确的carId。所以，似乎对jquery的处理是不正确的在Jinja工作时是否有一个特殊的jquery处理方法来访问＆＃34; for循环＆＃34;？

Answer 1

问题是$(".carsInWorkshop")总是返回3个元素而.attr 返回第一个元素的href

我有一个工作样本here

使用event.target确保您检索正确的元素，在这种情况下是用户点击的元素。

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

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

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

您可以将其放在jinja

中的脚本块中

编辑：我更新了jsfiddle和示例代码

使用jquery和ajax处理Jinja中的href

1 个答案: