Laravel Livewire中AJAX请求后jQuery点击事件失效问题

核心原因 #

1. jQuery事件绑定局限性：直接通过$('.table-row').on('click')绑定的事件仅对页面初始加载时存在的元素生效，Livewire通过AJAX动态渲染的新行不会继承该事件绑定。
2. 无效HTML结构：Blade代码中<tr>内部直接嵌套<tr>和<span>，违反HTML表格规范（<tr>仅允许包含<td>/<th>），浏览器会自动修正DOM结构，干扰Livewire的DOM diffing逻辑，引发事件异常。

修复步骤 #

1. 将jQuery事件改为委托绑定 #

把事件绑定到表格的父容器（如表格本身或外层div），利用事件冒泡处理动态生成的元素：

@pushonce('custom-scripts')
<script>
    // 绑定到表格容器（需确保表格有对应的id，示例中为#transaction-table）
    $('#transaction-table').on('click', '.table-row', function(el) {
        console.log('row clicked');
        let row = $(this).closest('tr');
        if (row.hasClass('has-match')) {
            let id = row.attr('id').split('-')[2];

            const subrow = $('#tx-subrow-' + id);
            const identifiedSubrow = $('#tx-identified-subrow-' + id);
            
            if (subrow.hasClass('d-none')) {
                identifiedSubrow?.removeClass('d-none');
                subrow.removeClass('d-none');
            } else {
                identifiedSubrow?.addClass('d-none');
                subrow.addClass('d-none');
            }
        }
    });
</script>
@endpushonce

2. 修正HTML表格结构 #

移除<tr>内部的非法嵌套，将子行直接放在<tbody>中与父行同级：

<tbody>
    @forelse($transactions as $tx)
        <tr wire:key="tx-row-{{ $tx->id }}" id="tx-row-{{ $tx->id }}" role="{{ !empty($tx->transaction_id) ? 'button' : '' }}" class="table-row {{ $tx->has_match && !$tx->match_removed ? 'has-match bg-light' : '' }} {{ $tx->has_partial_match && !$tx->match_removed ? 'has-match bg-white' : '' }}" style="--bs-bg-opacity: .50;">
            <td>... </td>
        </tr>
        <!-- 子行直接置于tbody内，与父行同级 -->
        <tr id="tx-subrow-{{ $tx->id }}" wire:key="tx-subrow-{{ $tx->id }}" class="bg-dark d-none" style="--bs-bg-opacity: .20;">
            <td>...</td>
        </tr>
        @if ($tx->has_identified_match)
            <tr id="tx-identified-subrow-{{ $tx->id }}" wire:key="tx-identified-subrow-{{ $tx->id }}" class="bg-dark d-none" style="--bs-bg-opacity: .20;">
                <td colSpan="9">...</td>
            </tr>
        @endif
    @empty
        <tr>
            <td colspan="9">无记录</td>
        </tr>
    @endforelse
</tbody>

3. 可选：用Livewire原生事件替代jQuery #

完全依赖Livewire响应式系统，避免DOM事件绑定问题：

• 组件内添加属性：

public $expandedRows = [];

• 修改Blade行结构：

<tr wire:key="tx-row-{{ $tx->id }}" id="tx-row-{{ $tx->id }}" role="{{ !empty($tx->transaction_id) ? 'button' : '' }}" class="table-row {{ $tx->has_match && !$tx->match_removed ? 'has-match bg-light' : '' }} {{ $tx->has_partial_match && !$tx->match_removed ? 'has-match bg-white' : '' }}" style="--bs-bg-opacity: .50;" wire:click="toggleRow({{ $tx->id }})">
    <td>... </td>
</tr>
<tr id="tx-subrow-{{ $tx->id }}" wire:key="tx-subrow-{{ $tx->id }}" class="bg-dark {{ in_array($tx->id, $expandedRows) ? '' : 'd-none' }}" style="--bs-bg-opacity: .20;">
    <td>...</td>
</tr>
@if ($tx->has_identified_match)
    <tr id="tx-identified-subrow-{{ $tx->id }}" wire:key="tx-identified-subrow-{{ $tx->id }}" class="bg-dark {{ in_array($tx->id, $expandedRows) ? '' : 'd-none' }}" style="--bs-bg-opacity: .20;">
        <td colSpan="9">...</td>
    </tr>
@endif

• 组件内添加切换方法：

public function toggleRow($id)
{
    if (in_array($id, $this->expandedRows)) {
        $this->expandedRows = array_filter($this->expandedRows, fn($rowId) => $rowId !== $id);
    } else {
        $this->expandedRows[] = $id;
    }
}

验证效果 #

修复后，分页切换、复选框筛选操作后，新渲染的表格行均可正常触发点击事件，子行显示/隐藏功能恢复正常。

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