The code I'm struggling with is based on this answer

my problem is that the table I want to use this for is created dynamically. The source HTML file just has an empty <table> tag that's filled depending on a file submitted by the user. I've copied the table it creates into my HTML file and had the code work.

This table is part of a django project, and all the javascript involved in creating the table happens in utils.js.

I've tried to modify it like this

$("#our_table")
                    .mousedown(".th", function () {
                      document.getElementById("demo").innerHTML = "Hello JavaScript!";
                      isMouseDown = true;
                      $(this).toggleClass("highlighted");
                      return false; // prevent text selection
                    })

based on this answer, same thing for .mouseover and .bind. Tried a few variations like using th without the dot, "tr th", ".tr.th" and possibly some I forget

the .on method doesn't seem to work for me at all; when I do this

    $("#our_table th")
                        .on('mousedown', function () {
                          document.getElementById("demo").innerHTML = "Hello JavaScript!";
                          isMouseDown = true;
                          $(this).toggleClass("highlighted");
                          return false; // prevent text selection
                        })
                       .on("mouseover", function () {
                      if (isMouseDown) {
                        $(this).toggleClass("highlighted");
                      }
                    })
                    .on('bind', "selectstart", function () {
                      return false; // prevent text selection in IE
                    });

it doesn't even work on a non-dynamically created table