1

I have jquery code that is inside a $(document).ready() call inside an HTML page that loads inside an iframe, and it works correctly until another function is called from the same page that removes a table entry. Then the table reloads still inside the same page but now the click handler to select the table row and highlight it wont work.

This code highlights a row in the table for a function to execute on that row(in this case the issue only happens when removing a row because its the only function that doesn't redirect the page requiring the page to reload after being returned)

On the initial load of the window, the click handler works correctly and will highlight, or un-highlight any row I want. But when I use the function to remove the row is when the issue happens. Here is the code for the highlight function:

$("tr[id*='report']").on("click",function(){
    if(!$(this).hasClass("highlighted")){
        $("#reports tr").removeClass("highlighted");
        $(this).addClass("highlighted");
    }
    else{
        $(this).removeClass("highlighted");
    }
});

After the row is removed using a function call from the parent webpage, the page calls the same function used to create the table in the first place to recreate the table with the new rows, but now the click handler for the highlight doesn't work. But the other click handlers for the remove, edit or add buttons still work.

This is the handler to use the edit button to edit the selected report and is located inside the same $(document).ready() function, directly below the highlight function call.

$("#edit").click(function(){
    if($("tr").hasClass("highlighted"))
    {
        openReport(helper);
    }
    else
    {
         alert("Please select a report to edit");
    }
});

The listener for this button still works, while the highlight function in the same scope does not. And the listener for highlighting does list in chrome's development tools event listeners section.

I am not sure if this is caused by of a scope issue inside the ready function on my part or if I am missing something. Any ideas or solutions would be great.

If more information is needed feel free to let me know.

eragon2262
  • 317
  • 2
  • 13
  • It'd be beneficial to have a link to the live site or a jsfiddle where this issue is replicated. – hopkins-matt Jul 18 '16 at 21:13
  • «until another function is called from the same page that removes a table entry» involving `datable(.draw())` on an ajax call `success`? ... Is `#edit` part of the "re-draw" ? – Louys Patrice Bessette Jul 18 '16 at 21:18
  • unfortunately, the codebase is spread across multiple pages using jquery and php so jsfiddle is not usable without modifying the code to work on a single page and the actually webpage requires a login and requires the user to be on a vpn to access so giving a link would be moot. – eragon2262 Jul 18 '16 at 21:22
  • @LouysPatriceBessette the table is made using a custom function I wrote to take database results and create a table based on them and adding them to the parent element using jquerys .html() method. The issue was that the $(document).ready() function didn't want to work with dynamically created elements, which the table would be. It worked to begin with because the table was created before the listener in the ready function, but after the selector wouldn't reference the right elements. – eragon2262 Jul 18 '16 at 21:33
  • Sure... `$(document).ready()` runs on load... When all page elements are created (before images are fully loaded, btw, good to know). So if you dynamically remove and re-create element after page load... FOR SURE it «doesn't want to» work with it. It doesn't even execute on that event. ;) – Louys Patrice Bessette Jul 18 '16 at 22:27

1 Answers1

3

Reading:

...until another function is called from the same page that removes a table entry. Then the table reloads still inside the same page but now the click handler to select the table row and highlight it wont work.

From what I can understand, your problem could be event-binding-on-dynamically-created-elements.

So I suggest to change your function to:

$(document).on("click", "tr[id*='report']", function(e) {
    if(!$(this).hasClass("highlighted")){
        $("#reports tr").removeClass("highlighted");
        $(this).addClass("highlighted");
    }
    else{
        $(this).removeClass("highlighted");
    }
});
Community
  • 1
  • 1
gaetanoM
  • 41,594
  • 6
  • 42
  • 61