停止提交时触发表单内的 href 路由？

问题描述

我正在使用 Laravel 和 Blade（以及 JQuery）。我有一个带有表单的表格，并且在底部我有一个带有 a 操作的 route 标签。我在 th 中还有一个按钮，它通过 jquery 提交表单（custom.js 代码如下）。

我遇到的问题是，当用户从 <div class="export" id="zip-submit-button"> 标签内点击 th，然后提交表单时，由于某种原因，a 标签上的路由被触发以及。我怎样才能防止这种情况？

<a class="rapport-download-link" href="{{route('client.rapport.export',['alias' => $client->alias,'eventType' => $event->type,'eventId' => $event->id])}}">
    <div class="exp-csv">
        <span>{{__("rapports.btn.export")}}</span>
    </div>
</a>

file.blade.PHP:

<th class="pt-0">
          <div class="export" id="zip-submit-button">
            <span id="export-selected">{{__("rapports.tab.export")}}</span>
          </div>
    </th>
</tr>
</thead>
<tbody id="rapports-body">
    <form action="{{route('client.rapport.export.zip',['alias' => $client->alias])}}" method="post" id="zip-submit-form">
        @csrf
        @foreach($events as $event)
            <tr class="next-reunions" data-type="{{$event->type}}" data-name="{{strtolower($event->name)}}">
                <td>
                    <div class="form-check">
                        <label class="form-check-label">
                            <input type="checkBox" name="partcheck[]" class="form-check-input rapport-check" value="{{$event->id}}" data-id="{{$event->id}}" data-type="{{$event->type}}">
                            <i class="input-frame"></i>
                        </label>
                    </div>
                </td>
                <td>{{$event->name}}</td>
                <td>{{date("Y-m-d - H:i",strtotime($event->startAt))}} EST</td>
                <td>{!! differenceInMinutes($event->startAt,$event->endAt) !!}min</td>
                <td>{{ucfirst($event->type)}}</td>
                <td>
                    <div class="d-flex">
                        <div>
                            <div class="img-user"></div>
                        </div>
                        <div class="ml-3"><span>{{count($event->participants)}}</span></div>
                    </div>
                </td>
                <td>$ 0</td>
                <td>
                    <a class="rapport-download-link" href="{{route('client.rapport.export','eventId' => $event->id])}}">
                    <div class="exp-csv">
                        <span>{{__("rapports.btn.export")}}</span>
                    </div>
                    </a>
                </td>
            </tr>
        @endforeach
    </form>
</tbody>

custom.js：

// export selection button
$(function() {
    $('#zip-submit-button').on("click",function() {
        $("#zip-submit-form").submit();
    });
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

jquery laravel-blade