-2

first I'm going to explain the situation and then the problem.

I'm designing a table with some data and I developed some functions for ordering this data when the "th" tag of the column is clicked.

$('#table_id > thead > tr > th').click(function() ...
//ordering algorithm

enter image description here In addition, I created 2 "select" tags for filtering the data of the tables. The method I'm using for filter data is to search for the text that matches the select text and use remove() method for deleting the row. enter image description here

document.getElementById("select_id").addEventListener("change", function() {
//remove rows

When the data is filtered (by the select) and I try to click the "th" tag of the column the "click" method is not working and I have no error messages in the console, so I don't know how to solve it.

Any one knows is "click" method changes it's functionallity when the page content changes?

Thanks for reading. If more code is needded for understanding the problem I will paste it.

arevilla009
  • 429
  • 3
  • 18
  • The answer depends on how exactly you're removing the rows. If you're not touching the `thead` part, there should be no issues. Ex. calling `.html` of the entire table (which is a big no-no) will recreate the thead too, and the attached event listeners will be gone. See also http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements . To give a good answer, we need to see, how exactly the rows are removed. – Teemu Feb 13 '20 at 08:28
  • This is __not__ a dup of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements). The question here is about removing the elements, not about dynamically adding them. – Teemu Feb 13 '20 at 10:07
  • Removing a row from a table should not remove any event listeners from the other elements. Now, the given answers are not fixing your code properly, please add the code for the removal of the rows, so that we can fix the root cause of the issue, not just the symptoms. – Teemu Feb 13 '20 at 11:34

3 Answers3

1

If you are changing the DOM after page renders try using .on()

$(document).on('click', '#table_id > thead > tr > th', function() { ... });

Pierre
  • 643
  • 1
  • 7
  • 14
Nick Surmanidze
  • 1,671
  • 1
  • 11
  • 20
  • This worked! Thanks! I have the same 3 code slices for 3 on(click) functions, it is possible to execute them in the same function? @Nick Surmanidze – arevilla009 Feb 13 '20 at 08:28
0

This seems to be an issue with dynamically loaded elements.

It is a duplicate question and has been answered here:

Event handler not working on dynamic content

Nicodemus Ojwee
  • 744
  • 6
  • 12
0

If the original th is removed from the DOM and then instead new th has inserted, the click event is no more assigned to it, so you need to re assign it.

another approach would be like what Nick Surmanidze suggested.

divelner
  • 244
  • 1
  • 2
  • 10