Apply functions to new rows

Pennywise

Sorry to be such a pain, but I have yet another question. Mainly, I have a function that enables scrolling row selection like this:

            function () {
                var isMouseDown = false,
                isSelected;
                $("#homeTable tr")
                  .mousedown(function () {
                      isMouseDown = true;
                      $(this).toggleClass("selected");
                      isSelected = $(this).hasClass("selected");
                      return false; // prevent text selection
                  })
                  .mouseover(function () {
                      if (isMouseDown) {
                          $(this).toggleClass("selected", isSelected);
                      }
                  })
                  .bind("selectstart", function () {
                      return false;
                  })

                $(document)
                  .mouseup(function () {
                      isMouseDown = false;
                  });
            }

I define this function before initializing my table. My problem is that if I add new row, this function is not applied to those new rows. I have tried adding a callback like this:

    $(document).ready(function () {
        var table = $('#homeTable').DataTable({
            scrollY: "500px",
            //scrollX: true,
            responsive: true,
            scrollCollapse: true,
            paging: true,
            lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            drawCallback: function (settings) {
                var isMouseDown = false,
                isSelected;
                $("#homeTable tr")
                  .mousedown(function () {
                      isMouseDown = true;
                      $(this).toggleClass("selected");
                      isSelected = $(this).hasClass("selected");
                      return false; // prevent text selection
                  })
                  .mouseover(function () {
                      if (isMouseDown) {
                          $(this).toggleClass("selected", isSelected);
                      }
                  })
                  .bind("selectstart", function () {
                      return false;
                  })

                $(document)
                  .mouseup(function () {
                      isMouseDown = false;
                  });
            }

        });

However, if I do that, I am unable to select any rows on initialization, but if I add new rows, I CAN select those new rows and only those new rows. How can I apply this function across the board to all rows on initialization as well as any new rows upon their addition? Again, sorry to be such a bother!

Edit:

More generally, is there a way to reset the table to the same state it was on intitalization? I tried destroying the table and creating a new one, but this gave me problems because rows I had removed did not reappear on reinitlization. Is that normal? Moreover, when clicking the back button on a mobile device, I can see the responsive CSS did not get applied. So instead of recreating the table, I push all rows I remove into an array and then add them back on page hide so they are back if the user clicks back. Bascially I just want the table to be in its initial state when the user clicks back on a mobile device. Would ajax.reload() be the way to go? Haven't tried that yet. Anyway, thanks again for you responsiveness. This plugin is one of the coolest things out there for sure!

allan

Don't use a static event handler. Use a delegated one. Have a look at this example to see how that can be done, and more importantly the jQuery documentation on this.

Allan

Pennywise

Thank you, thank you, thank you! This works. I am still a newbie. Been coding in general for about a year and javascript for about 4 months. The documentation you linked will help me not just with DataTables, but programming in general. I very much appreciate your replies, and I have just made a donation to DataTables for your superlative support!

allan

Thank you. A pleasure to have been able to help. I remember the revelation of delegated event handlers myself as well. An excellent tool to have in your pocket.

Allan