Fix #4203: resize event name use id if setting

site/docs/api/table-options.md

@@ -37,6 +37,8 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
   The height of table, enable fixed header of table.
 
+  Note that if there are multiple tables on a page and the height option is set at the same time, you need to add the `id` attribute to each table, otherwise, the window resize will not work properly.
+
 - **Default:** `undefined`
 
 - **Example:** [Table Height](https://examples.bootstrap-table.com/#options/table-height.html)

src/bootstrap-table.js

@@ -334,7 +334,8 @@ class BootstrapTable {
       }
     })
 
-    $(window).off('resize.bootstrap-table')
+    const resizeEvent = `resize.bootstrap-table${this.$el.attr('id') || ''}`
+    $(window).off(resizeEvent)
     if (!this.options.showHeader || this.options.cardView) {
       this.$header.hide()
       this.$tableHeader.hide()
@@ -345,7 +346,7 @@ class BootstrapTable {
       this.$tableLoading.css('top', this.$header.outerHeight() + 1)
       // Assign the correct sortable arrow
       this.getCaret()
-      $(window).on('resize.bootstrap-table', e => this.resetWidth(e))
+      $(window).on(resizeEvent, e => this.resetWidth(e))
     }
 
     this.$selectAll = this.$header.find('[name="btSelectAll"]')