如何点击Bootstrap模态框关闭按钮后取消jQuery的trigger()触发

问题根源 #

你原代码的逻辑存在两个核心问题：

1. trigger('click')是一次性触发按钮点击动作，并非绑定事件处理器，所以unbind('trigger')完全无效——unbind仅能解绑通过on()绑定的事件监听。
2. 关闭模态框时URL中的page参数并未移除，页面刷新后JS会重新执行，检测到page参数就再次触发模态框。

最优方案：AJAX异步加载分页（无页面刷新） #

这种方式彻底避免页面刷新，分页切换时模态框保持打开，关闭后也不会残留page参数，是最流畅的解决方案。

步骤1：拆分视图，准备AJAX返回内容 #

创建resources/views/announcements/partials/modal-body.blade.php，存放模态框主体内容：

@if ($announcements->count())
    @foreach ($announcements as $pengumuman)
    <ul class="list-group mb-4 btn3d text-center">
      <li class="list-group-item bg-warning">{{ $pengumuman->judul }}.</li>
      <li class="list-group-item">{{ $pengumuman->category_id }}.</li>
      <li class="list-group-item">{{ $pengumuman->pesan }}.</li>
      <li class="list-group-item"><img src="/imgs/kentang.jpg" alt="" class="img-fluid" style="width: 150px; height:100px"></li>
      <li class="list-group-item">{{ $pengumuman->durasi }} Hari.</li>
      <li class="list-group-item">
        @if ($pengumuman->user_id == 0)
            {{ $pengumuman->nama_admin }}
        @else 
            {{ $pengumuman->user_id }}
        @endif
      </li>
      <li class="list-group-item d-flex justify-content-center"><a href="#" type="button" class="button text-decoration-none w-50"><span>Design partisipan</span></a></li>
    </ul>
    @endforeach

    <div id="paginator">
      {{ $announcements->links('pagination::bootstrap-5', ['class' => 'ajax-pagination']) }}
    </div>
@endif

步骤2：修改控制器，支持AJAX请求 #

在控制器方法中判断请求类型，返回对应内容：

public function index()
{
    $announcements = Announcement::paginate(5);
    
    // AJAX请求返回模态框主体
    if(request()->ajax()){
        return view('announcements.partials.modal-body', compact('announcements'));
    }
    
    // 正常请求返回完整页面
    return view('announcements.index', compact('announcements'));
}

步骤3：更新前端JS逻辑 #

替换原JS代码，实现AJAX分页和模态框控制：

$(document).ready(function(){
    // 初始加载时，若有page参数则直接打开模态框
    const hasPageParam = {{ request('page') ?? 0 }};
    if(hasPageParam){
        $('#daftarPengumuman').modal('show');
    }

    // 监听分页链接点击，异步加载内容
    $(document).on('click', '#paginator .ajax-pagination a', function(e){
        e.preventDefault();
        const url = $(this).attr('href');
        
        $.get(url, function(data){
            $('#daftarPengumuman .modal-body').html(data);
        });
    });

    // 关闭模态框时移除URL中的page参数
    $('.pengumuman_close').on('click', function(){
        if(window.history.replaceState){
            const currentUrl = new URL(window.location.href);
            currentUrl.searchParams.delete('page');
            window.history.replaceState({}, document.title, currentUrl.toString());
        }
    });
});

备选方案：关闭模态框时清除URL的page参数 #

如果不想改用AJAX，可通过修改URL解决刷新自动弹出问题：

$(document).ready(function(){
    // 初始加载打开模态框
    if({{ request('page') ?? 0 }}){
        $('#daftarPengumuman').modal('show');
    }

    // 关闭模态框时移除page参数
    $('.pengumuman_close').on('click', function(){
        if(window.history.replaceState){
            const currentUrl = new URL(window.location.href);
            currentUrl.searchParams.delete('page');
            window.history.replaceState({}, document.title, currentUrl.toString());
        }
    });
});

内容的提问来源于stack exchange，提问作者nikkiSix