After destroying bootstrap-table custom view events not remove

[wil-wu]

Bootstraptable version(s) affected

1.21.2

Description

When custom view body rendered, I add some listeners on custom view element. but when I destroy bootstrap-table, event 'custom-view-post-body.bs.table' not remove. the event bound many times.

Example(s)

<button id="build" class="btn btn-primary">build</button>
<button id="destroy" class="btn btn-danger">destroy</button>
<table id="table"></table>
<template id="viewTemplate">
    <div class="col">
        <button class="action btn btn-info">%name%</button>
    </div>
</template>

<script>
    let $table = $('#table')

    function initTable() {
        $table.bootstrapTable('destroy').bootstrapTable({
            showCustomView: true,
            customView: customView,
            columns: [{
                field: 'id',
                title: 'Item ID'
            }, {
                field: 'name',
                title: 'Item Name'
            }, {
                field: 'price',
                title: 'Item Price'
            }],
            data: [{
                id: 1,
                name: 'Item 1',
                price: '$1'
            }, {
                id: 2,
                name: 'Item 2',
                price: '$2'
            }, {
                id: 2,
                name: 'Item 2',
                price: '$2'
            }]
        })

        $table.on('custom-view-post-body.bs.table', () => {
            actions()
        })

        function customView(data) {
            let template = document.getElementById('viewTemplate').innerHTML
            let view = ''
            for (const row of data) {
                view += template.replace('%name%', row.name)
            }
            return `<div class="row">${view}</div>`
        }

        function actions() {
            let customViewEl = document.querySelector('.fixed-table-custom-view')

            customViewEl.querySelectorAll('.action').forEach((el) => {
                el.addEventListener('click', () => {
                    console.log('action')
                })
            })
        }
    }

    document.getElementById('build').addEventListener('click', function () {
        initTable()
    })

    document.getElementById('destroy').addEventListener('click', function () {
        $table.bootstrapTable('destroy')
    })

</script>

Possible Solutions

initTable function

$table
  .off('custom-view-post-body.bs.table')
  .on('custom-view-post-body.bs.table', () => {
      actions()
  })

Additional Context

No response

[UtechtDustin]

This is not a bug, the event listener is created by you.
So you have to remove it, if you destroy the table.
The bootstrap-table will only remove event listeners which are created by the bootstrap-table.

The easiest fix for you would be to move adding the listener out of the initTable method.
Would also increase the performance.