0

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

Barmar
  • 741,623
  • 53
  • 500
  • 612
WouterG
  • 3
  • 2
  • `$("#our_table").on("mousedown", ".th", function ...)` – Barmar Nov 12 '21 at 15:56
  • @Barmar sorry for late answer but no that doesn't work. The .on method just does nothing for me here even in static table – WouterG Nov 15 '21 at 08:34
  • Add console.log statements so you can tell whether the handlers are being triggered. – Barmar Nov 15 '21 at 14:58
  • I managed to fix it - ended up using $("#our_table").on( "mousedown", "tbody tr th", function () {... example didn't actually have a tbody but I would guess "tr th" would have worked – WouterG Nov 15 '21 at 15:55
  • Just `"th"` is probably enough. The question is inconsistent about whether `th` is an element type or class. – Barmar Nov 15 '21 at 15:56

0 Answers0