jQuery click handler not firing when switching pages in table

astoller

Link to test case: I don't have a cut-down test case at this point, only a sort of full-blown test-case (very much "in development". I will try to describe the issue with some of the code involved, and if need be provide a link to the page I'm working on developing.
Debugger code (debug.datatables.net)**: It's been "uploading" for over 10 minutes - I tried again, and I see error messages (for the debugger, not for my code - see more at end of post)
Error messages shown: None
Description of problem: I'm using PHP code to retrieve data from a Google Sheet and programmatically generating the HTML code for the table on my page.
In the first column of my table I put a button. Each button contains an id="b_#" where '#' is the row number in the table. There is also a corresponding div element for each row (id="d_#") that is hidden by default and the idea is that if you click on the row's button it will toggle the visibility of that row's div with additional information (I'm still playing with the UI - I'm open to suggestions on better UI, but I don't think that's the source of my issue)
I have javascript code ("directory.js" -_ I currently put the datatable_debugger code in there because I couldn't figure out how to get it to work otherwise_) that contains the following:

$(".moreinfo_button").click(function() {
    var sub_id = localStorage.getItem("subid");
    var id = $(this).attr('id').replace(/b_/, "d_");
    id = "#"+id;
    console.log("enter button_click ("+id+")("+sub_id+")");//#=#
    if (sub_id != null && sub_id != "" && sub_id != id) {
        if ($(sub_id).is(':visible')) {
            console.log("inner_toggle: " + sub_id); //#=#
            $(sub_id).toggle(500); // close the previous one
        }
    }
    sub_id = id; // reset state
    localStorage.setItem("subid", sub_id);
    console.log("outer_toggle: " + id);//#=#
    $(id).toggle(1000);
});

This is the current version, I've been trying a bunch of different things to get it to work.

Anyway - on the first page of the table (default 15 rows) - any button I click fires off the above code and toggles the visibility of the associated div element - great - but when I go to the next page I can click on the button all I want and nothing happens (no error in the javascript console, nothing). If I change the number of rows from say 15 to 25 or 50, the first 15 rows work, but the 16th row and below don't.

As near as I can tell the generated HTML is fine. I just cannot figure out why it only fires the click handler on the initial 15 rows and none of the others.

While waiting for the upload of my configuration data to complete (it's taking an awful long time - I may need to abort and try again) I decided to test something out.
* If I change the default number of rows per page to 10 - only the first 10 buttons work, the 11th button (1st on next page) and below don't work
* If I change it to 25 - the first 25 work, but the 26th and below don't

So it definitely seems to somehow be tied into the pagination.

debugger info when it initially loads:

[Error] Failed to load resource: the server responded with a status of 404 () (index.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (debug.css.map, line 0)

When I try to upload, I get the following:

POST https://debug.datatables.net/remote/submit.php 500 jquery.min.js:2 
send @ jquery.min.js:2
ajax @ jquery.min.js:2
upload @ debug.js:1
(anonymous) @ debug.js:1
setTimeout (async)
stringify @ debug.js:1
(anonymous) @ debug.js:1
setTimeout (async)
gatherData @ debug.js:1
(anonymous) @ debug.js:1
setTimeout (async)
(anonymous) @ debug.js:1
dispatch @ jquery.min.js:2
y.handle @ jquery.min.js:2

colin

It sounds like you need to use delegated events.

Try changing:

$(".moreinfo_button").click(function() {

to be

$('table tbody').on('click', '.moreinfo_button', function() {

If no success, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

astoller

Thanks - as I said, I was willing to share the link to the actual page if needed, and perhaps would have if the debugger would have been able to upload things, but I had hoped (and was apparently rewarded) that my description of the problem would be sufficient to figure out what I was doing wrong. I also guess I didn't know the proper terminology to use because I didn't see that when I tried searching for answers on my own. Thanks much!