使用jquery

Question

我在烧瓶模板上使用for循环生成了一些引导卡。在每张卡上，都有一个用于运行ajax查询的按钮。我要做的是显示在卡体内检索到的内容。卡体的ID是动态的，因为我是通过for循环生成它们的。

      <div>
        <h5 id="resultHeader">Results - Men</h5>
        <div class="row">
          {% for gen in ev_list %}
            {% for evt in gen.boys %}
              <div class="col-sm-6">
                <div class="card result_card">
                  <div class="card-header">
                    {{ evt }}
                    <button class="btn btn-outline-secondary evt float-right" data-event="{{ evt }}" data-id="{{ meet.meetid }}" data-gender="-men">
                      <i class="fas fa-file-download"></i>
                    </button>
                  </div>
                  <div class="card-body">
                    <h5 class="card-title">Special title treatment</h5>
                    <p class="card-text" id="result_{{ evt }}">With supporting text below as a natural lead-in to additional content.</p>
                  </div>
                </div>
              </div>
            {% endfor %}
          {% endfor %}          
        </div>
      </div>

jquery：

$('.evt').on('click', function() {
        var event = $(this).attr('data-event');
        var id = $(this).attr('data-id');
        var gender = $(this).attr('data-gender');


        var p_text = $('#result_'+$(this).attr('data-event')).text();
        console.log('#result_'+$(this).attr('data-event'));
        console.log(p_text);

        $.ajax({
            type: 'POST',
            url: '/process',
            data: JSON.stringify({ "event" : event, "meetid":id, "gender":gender} ),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
        })
        .done(function(data){
            $('#result_'+$(this).attr('data-event')).text(data);
        });
    });

浏览器上的html如下所示：

js脚本在浏览器上的控制台输出如下：

尽管P标签的ID和我要定位的ID看起来很相似，但jquery似乎没有选择正确的元素。我怎样才能解决这个问题？