Develop Reference

JS function is not working when element clicked

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
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.
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.

If you are changing the DOM after page renders try using .on()
$(document).on('click', '#table_id > thead > tr > th', function() { ... });

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

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.

Expand/Collapse table data

I've started a deep dive in to HTML + CSS + JS for the past couple of days and I'm curious to know is it possible to expand and collapse rest of the table data if I click my first table data on my table row.
I've tried myself using multiple combinations but couldn't succeed so I wanted to understand is it really possible or I have to improve further :)
Thanks!
https://jsfiddle.net/p9mtqhm7/553/
If I click on say - AUSDe451 or AUSDe441, rest of the corresponding columns should be either expand or collapse[i.e LAMP 6.93817139 & 51_REGALIA 456.352] should expand/collapse if I click - AUSDe451]

Your click handler is a bit wrong!
When you're handling clicks on the .server-name element, $(this) inside the function refers to the item that has been clicked, in this case the .server-name table row.
When you run $(this).find(...), you're looking for child elements of the table row, which do not exist. So rather than use $(this).find(...), you should probably be looking elsewhere in the DOM.
Also, you seem to be searching for span elements, which don't exist anywhere in your HTML markup, so that part of the function will never return anything anyway.

Cloned autocomplete input not working

I have a problem with jQuery function clone(). I think the problem is in the withDataAndEvents input parameter of this method.
Initially, I'm coding a table that has dynamic rows. I'm adding dynamically rows when clicking on a button put only in the first row. the first row contains initially many inputs fields and combo-boxes. Each field is initalized by an ajax call. And each action on a field leads to the refresh (filtering) on the whole fields of a row. I'm also using autocomplete on input fields.
The first row works perfectly. However, when cloning the tag:
If I did not enter values in the first row, the cloned and first row work fine
If I enter a value or values in first row fields and after I clone the , only the first row fields still work. In this case, if I try to change the value of the combo-boxe (which fire a change event for all concerned row fields), the fields of the first row are impacted despite using Ids when changing autocomplete data. Ids of fields, combo-boxes, table rows are dynamically created when clicking on the button to clone the widget.
The code I wrote is too long so I created a fiddle and simplified the case and still have the same problem.
I tried many suggestions that I've found like this, this one or this one in vain :-(
(data.('autocomplete', null), autocomplete("destroy") ...)
Do you have ideas about this issue ?
thanks in advance

Aside from the typo in the test (you are selecting by class instead of the new element by id), the basic problem is you are applying autocomplete before you add it to the DOM.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/87jcw1y0/2/
I just reversed the order of these two lines:
$('.body').append(clone);
applyAutoComplete2('#myinput' + inc);
The cause... Some plugins use storage data associated with the DOM element, or attach events to ancestors etc. None of these can happen with a disconnected DOM element, so just attach it to the DOM first.

I think ur asking this
Check in this link http://jsfiddle.net/bsarunmca/87jcw1y0/3/
applyAutoComplete1('#myinput1');
$("button").click(function() {
inc = inc+1;
$('#myinput1').clone().attr('id','myinput'+inc).appendTo('.add-this');
$('#myinput'+inc).val('');
applyAutoComplete2('#myinput'+inc);
});

Updating script to run for newly created table rows with incremented IDs

I've got a table with the type ahead feature from jQuery UI. It is working with my form when there is only 1 table row (initial view). There's a button to allow the user to create additional table rows as required which also increments the IDs for the text inputs and select menus.
There's another script that inserts a matching value into the select menu based on the typeahead selection. Both of these work fine for the first row, but stop working for any additional Rows that are created.
I've setup a sample JSFiddle:
http://jsfiddle.net/fmdataweb/hxzME/1/
I think I understand why they only work for the first row - they are tied to these IDs: #lastYearSelect1 and #nextYearSelect1 - but I'm not sure how to change them so they then work with #lastYearSelect2, #nextYearSelect2, #lastYearSelect3, #nextYearSelect3 and so on.

There's a few problems with the script.
Firstly you're right, you need to setup all the scaffolding again after you clone the row, the clone method will not copy the functionality, just the html elements.
To find the right element you can use the JQuery ^= selector, which matches the start of an attribute name, on the on the clone object to find the right child input to turn into an autocomplete field. You can do the same trick in the function to change the dropdown to the correct function.
Finally a lot of your code and variables were in the wrong scope to be accessible properly. I've moved a lot of the vars around so they're accessible, mainly into the global scope. When you're a bit more experienced you won't want to do this, but for now this is fine.
I also created a new function setDropDown, but this code is almost identical to what was there before.
Here is a working version of your code:
http://jsfiddle.net/hxzME/3/

Add classes to elements and use class selectors when binding an event handlers.

Find the <th> of a clicked <td> in a table when <th> has span greater than 1

I'm trying to find a TD's associated TH cell, but am having trouble using JQuery's index() and eq() functions since the TH's in my table have spans of greater than one.
I know I can retrieve a TD's cellIndex property, but would I use this to find the TH? Or is there another more appropriate way?
Intended functionality is to click a cell and have it give me the name of the heading it's under. Code sample: http://jsfiddle.net/KyTDA/

If you want to find the corresponding table header given the index of a table cell you can use the following jQuery (this is assuming you already have the table cell's index):
var th = td.closest('table').find('th').eq($td.index());

Since you've edited your question and provided code, I'll provide another answer to this.
The markup you have posted isn't valid. You don't have any table rows, and if you're trying to nest table cells inside table headings, that isn't valid either. What are you trying to achieve in terms of layout? Try going to http://jsfiddle.net/ and create your markup and then provide a link and let me know when you have the layout you're trying to create.