From 6986cae1bfc25572d54aa0391154218b1b6aeaf3 Mon Sep 17 00:00:00 2001
From: Jennifer Richards <jennifer@staff.ietf.org>
Date: Tue, 2 May 2023 14:50:38 -0400
Subject: [PATCH] fix: Listen for show.bs.modal on document (#5565)

Avoids losing the listener when DOM is changed dynamically.
---
 ietf/static/js/ietf.js | 37 +++++++++++++++++++------------------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/ietf/static/js/ietf.js b/ietf/static/js/ietf.js
index 353dba005..d6be021a2 100644
--- a/ietf/static/js/ietf.js
+++ b/ietf/static/js/ietf.js
@@ -255,25 +255,26 @@ $(document)
 
 // Bootstrap doesn't load modals via href anymore, so let's do it ourselves.
 // See https://stackoverflow.com/a/48934494/2240756
+// Instead of attaching to the modal elements as in that example, though,
+// listen on document and filter with the .modal selector. This allows handling
+// of modals that are added dynamically (e.g., list.js apparently replaces DOM 
+// elements with identical copies, minus any attached listeners).
 $(document)
-    .ready(function () {
-        $('.modal')
-            .on('show.bs.modal', function (e) {
-                var button = $(e.relatedTarget);
-                if (!$(button)
-                    .attr("href")) {
-                    return;
-                }
-                var loc = $(button)
-                    .attr("href")
-                    .trim();
-                // load content from value of button href
-                if (loc !== undefined && loc !== "#") {
-                    $(this)
-                        .find('.modal-content')
-                        .load(loc);
-                }
-            });
+    .on('show.bs.modal', '.modal', function (e) {
+        var button = $(e.relatedTarget);
+        if (!$(button)
+            .attr("href")) {
+            return;
+        }
+        var loc = $(button)
+            .attr("href")
+            .trim();
+        // load content from value of button href
+        if (loc !== undefined && loc !== "#") {
+            $(this)
+                .find('.modal-content')
+                .load(loc);
+        }
     });
 
 // Handle history snippet expansion.