Develop Reference

jQuery table disappears on the first click and appears after the next one

I have simple table made in jQuery:
<div id="tabs">
<ul>
<li>Al-Ar</li>
<li>Ar-D</li>
<li>E-Ha</li>
<li>Ha-J</li>
<li>K-Mo</li>
</ul>
<table class="tablica">
<tbody>
<tr class="tr1">
<td></td>
</tr>
<tr class="tr">
<td>
<div id="tabs-1">
<table class="pol">
<tbody>
<tr>
<td class="td10" colspan="4">Al..Ar</td>
</tr>
<tr>
<td class="td1">1</td>
<td class="td2">1</td>
</tr>
<tr>
<td class="td1">2</td>
<td class="td2">2</td>
</tr>
...
<tr>
<td class="td1">205</td>
<td class="td2">205</td>
</tr>
</tbody>
</table>
</div>
</tr>
<tr class="tr1">
<td></td>
</tr>
</tbody>
</table>
</div>
(On the start page only the first page of the table is displayed)
Plus script:
<script>
$('#tabs a').click(function(e) {
e.preventDefault();
var url = "./tabsContent1.php";
var urlId = $(this).attr("href");
// ajax load from href
$(".tabs-content").load(url + " " + urlId);
});
</script>
Where tabsContent1.php contains the rest of the table.
Unfortunately, the above code causes that when any element of the table is clicked, it disappears! Only the table of contents bar is visible. After clicking on any page, everything returns to normal. So this problem only appears on the first click.
An additional problem is the fact that the pages from the table (these are interactive links) appear full-screen despite the script on the main page:
<script>
<!--
onload=function(){
for(i=0;d=document.getElementsByTagName('a')[i++];){
if (d.href.match(/.*hotel\d+\.html/)){
d.onclick=function(){window.open(this.href,'a','width=740px, height=750px, resizable=yes, scrollbars=yes, left=20px, top=20px');return false}
}
}
}
//-->
</script>
How to change it?

How can I identify a specific item in <select> and add a delete button each row in jquery

1.) I have created a nested table, then what I want to do is when I click the 'Delete' button inside the child table, its row will be deleted.
2.) I have <select> tag. The problem is how can I put a validation which checks if the item type has been already selected by one customer, but this selected item can be also selected at the next Customer.
For example, Customer1 selects Iron. Now the Customer1 cannot choose the Iron type of item on the next item. Customer1 may also select Copper or Wood but not Iron. Then if I have Customer2 the Iron type of Item can be selectable.
Here's my code:
$(".addItem").on('click', function(e) {
$(this).closest('table').find(".item:last").after('<tr class="item"><td><button>Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id=""><option value="">Iron</option><option value="">Copper</option><option value="">Wood</option></select></td></tr>');
});
$(".addCustomer").on('click', function(e) {
var newCustomer = $('.customer:last').after('<tr class="customer"><td>New Customer</td><td></td><td></td><td></td></tr>');
var newCart = $('.cart:first').clone(true, true).wrap('td');
newCart.find('tbody').html("").html('<tr class="item"><td><button>Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id=""><option value="">Iron</option><option value="">Copper</option><option value="">Wood</option></select></td></tr>');
$('.customer:last').append(newCart);
e.preventDefault();
});
$('.itemType').on('change', function() {
var selected = $(this)find('option:selected').val();
if ($(this).find('option:selected').val() === selected) {
alert("Item already selected.");
}
});
table,
td,
th {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>PO</title>
<header>
<form id="panel">
</form>
</header>
<section id="I">
<table id='PO1' class="purchaseOrder">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Gender</th>
<th>Cart</th>
</tr>
</thead>
<tbody>
<tr id='C1' class='customer'>
<td>Some Name</td>
<td>30</td>
<td>My Address</td>
<td>Male</td>
<td>
<table class='cart'>
<thead>
<tr>
<th>Delete</th>
<th>Brand</th>
<th>Quantity</th>
<th>Size</th>
<th>Color</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr id='item1' class='item'>
<td><button>Delete</button></td>
<td>Yamaha</td>
<td>30</td>
<td>Large</td>
<td>Black</td>
<td>
<select name="" class="itemType">
<option value="i">Iron</option>
<option value="c">Copper</option>
<option value="w">Wood</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='5'></td>
<td>
<button class="addItem">Add Item</button>
</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3'></td>
<td>
<button class="addCustomer">Add Customer</button>
</td>
</tr>
</tfoot>
</table>
</section>
<footer> </footer>

I have fixed the Delete issue. In terms of validation, answer my below question and I will fix the same.
Okay, I handled it now properly with an empty item and disabling the selected value on other item.
$(".addItem").on('click', function(e) {
var parent = $(this).closest('table');
var lastItem = parent.find(".item:last");
var newItem = $('<tr class="item"><td><button>Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id="" class="itemType"><option value="-1"></option><option value="i">Iron</option><option value="c">Copper</option><option value="w">Wood</option></select></td></tr>');
if(lastItem && lastItem.length > 0) {
parent.find(".item:last").after(newItem);
} else {
parent.append(newItem);
}
fixNewSelectOption(newItem);
handleDeleteAction();
});
$(".addCustomer").on('click', function(e) {
var newCustomer = $('.customer:last').after('<tr class="customer"><td>New Customer</td><td></td><td></td><td></td></tr>');
var newCart = $('.cart:first').clone(true, true).wrap('td');
newCart.find('tbody').html("").html('<tr class="item"><td><button>Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id="" class="itemType"><option value="-1"></option><option value="i">Iron</option><option value="c">Copper</option><option value="w">Wood</option></select></td></tr>');
$('.customer:last').append(newCart);
handleDeleteAction();
e.preventDefault();
});
$(document).on('click', '.item button', function(){
if($(this).closest('table').find('.item button').length > 1) {
$(this).closest('tr').remove();
}
handleDeleteAction();
});
$(document).on('change', '.itemType', function(){
fixSelectOption($(this));
});
function handleDeleteAction() {
$('table.cart').each(function(){
var cart = $(this);
var deleteButtons = cart.find('.item button');
deleteButtons.prop('disabled', deleteButtons.length <= 1);
});
}
function fixSelectOption(elm) {
var selected = elm.val();
var options = elm.find('option[value!="' + selected + '"]');
var elms = elm.closest('table').find('.itemType').not(elm);
elms.each(function(){
var current = $(this);
if(current.val() === selected){
current.val('-1');
}
options.each(function(){
var optValue = $(this).val();
if(optValue !== '-1' && !$(this).prop('disabled')){
current.find('option[value="' + optValue + '"]').prop('disabled', false);
}
});
if(selected !== '-1'){
current.find('option[value="' + selected + '"]').prop('disabled', true);
}
});
}
function fixNewSelectOption(elm) {
var elms = elm.closest('table').find('.itemType').not(elm);
elms.each(function(){
var current = $(this);
if(current.val() !== '-1'){
elm.find('option[value="' + current.val() + '"]').prop('disabled', true);
}
});
}
table,
td,
th {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>PO</title>
<header>
<form id="panel">
</form>
</header>
<section id="I">
<table id='PO1' class="purchaseOrder">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Gender</th>
<th>Cart</th>
</tr>
</thead>
<tbody>
<tr id='C1' class='customer'>
<td>Some Name</td>
<td>30</td>
<td>My Address</td>
<td>Male</td>
<td>
<table class='cart'>
<thead>
<tr>
<th>Delete</th>
<th>Brand</th>
<th>Quantity</th>
<th>Size</th>
<th>Color</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr id='item1' class='item'>
<td><button disabled>Delete</button></td>
<td>Yamaha</td>
<td>30</td>
<td>Large</td>
<td>Black</td>
<td>
<select id="select" class="itemType">
<option value="i">Iron</option>
<option value="c">Copper</option>
<option value="w">Wood</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='5'></td>
<td>
<button class="addItem">Add Item</button>
</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3'></td>
<td>
<button class="addCustomer">Add Customer</button>
</td>
</tr>
</tfoot>
</table>
</section>
<footer> </footer>

To delete that respective row on click of any "Delete" button, could you try using this
$(document).on('click', '.item button', function(){
$(this).parent().parent().remove();
});
Here is a Codepen
Another thing I noticed, what are you trying to do in your $('.itemType').on('change', function() ? Because as of now all you are doing is literally checking the value of the selected option to ITSELF which always obviously will be true.

you have to pass an element id which will be deleted from both customer's cart and selected row like this;
<tr class="item"><td><button data-id="1">Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id=""><option value="">Iron</option><option value="">Copper</option><option value="">Wood</option></select></td>
jquery part:
$("tr.item button").click(function(){
var item_to_remove = $(this).attr("data-id");
var row = $(this).parent().parent();
$.ajax({
url: "url to cart handler for delete item",
data: "id="+item_to_remove,
type: "post",
success: function(data){
row.remove();
},
error: function(){
console.log("ajax req for delete failed");
}
});
});

For the deletion of rows I added checboxes.
PLUNKER
SNIPPET
table {
table-layout: fixed;
}
table,
td,
th {
border: 1px solid black;
}
.name,
.brand,
.color {
width: 10%;
}
.age,
.address,
.pay,
.qty,
.size {
width: 5%;
}
.cart th:first-of-type {
width: 2.5%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>PO</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
</header>
<section id="I">
<table id='PO1' class="purchaseOrder">
<thead>
<tr>
<th class='name'>Name</th>
<th class='age'>Age</th>
<th class='address'>Address</th>
<th class='pay'>Pay</th>
<th>Cart</th>
</tr>
</thead>
<tbody>
<tr id='C1' class='customer'>
<td>Jon Doe</td>
<td>30</td>
<td>Earth</td>
<td>Credit</td>
<td>
<table class='cart'>
<thead>
<tr>
<th> </th>
<th class='brand'>Brand</th>
<th class='qty'>Qty</th>
<th class='size'>Size</th>
<th class='color'>Color</th>
</tr>
</thead>
<tbody>
<tr id='item1' class='item'>
<td>
<input class="chx" name="chx" type="checkbox">
</td>
<td>New Item</td>
<td></td>
<td></td>
<td>
<select name='color'>
<option value='black'>Black</option>
<option value='white'>White</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<button class="remItem" onclick='remItem(this)'>-</button>
</td>
<td colspan='3'></td>
<td>
<button class="addItem" onclick='addItem("itemTemplate", this)'>+</button>
</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3'></td>
<td>
<button class="addCustomer">Add Customer</button>
</td>
</tr>
</tfoot>
</table>
</section>
<footer>
<template id="cartTemplate">
<table class='cart'>
<thead>
<tr>
<th> </th>
<th class='brand'>Brand</th>
<th class='qty'>Qty</th>
<th class='size'>Size</th>
<th class='color'>Color</th>
</tr>
</thead>
<tbody>
<tr class='item'>
<td>
<input class="chx" name="chx" type="checkbox">
</td>
<td>New Item</td>
<td></td>
<td></td>
<td>
<select name='color'>
<option value='black'>Black</option>
<option value='white'>White</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<button class="remItem" onclick='remItem(this)'>-</button>
</td>
<td colspan='3'></td>
<td>
<button class="addItem" onclick='addItem("itemTemplate",this)'>+</button>
</td>
</tr>
</tfoot>
</table>
</template>
<template id='itemTemplate'>
<tr class="item">
<td>
<input class="chx" name="chx" type="checkbox">
</td>
<td>New Item</td>
<td></td>
<td></td>
<td>
<select name="color">
<option value="black">Black</option>
<option value="white">White</option>
</select>
</td>
</tr>
</template>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(".addCustomer").on('click', function(e) {
var newCustomer = $('.customer:last').after('<tr class="customer"><td>New Customer</td><td></td><td></td><td></td></tr>');
var newCart = newClone('cartTemplate');
$('.customer:last').append(newCart);
e.preventDefault();
});
function newClone(id) {
var template = document.getElementById(id);
var clone = document.importNode(template.content, true);
return clone;
}
function addItem(id, origin) {
var newItem = newClone(id);
$(origin).closest('table').append(newItem);
}
function toggle(origin) {
var chxList = $(origin).closest('table').find('.chx:checked');
chkList.click(function() {
chkList.prop('checked', origin.checked)
})
}
function remItem(origin) {
var chxList = $(origin).closest('table').find('.chx:checked');
chxList.each(function(idx, obj) {
obj.closest('.item').remove();
});
}
</script>
</body>
</html>

I know that you got answer on your question, but I couldn't notice some bad patterns in your code. You probably heard for best practices phrase and how things needs to be done on right way. By that I want to give one suggestions. Avoid using HTML in Javascript code whenever it is possible because it makes the application less well-structured.
By that I want to introduce you to templates.
Example how can we optimize your code (from accepted answer):
Wrap everything form newItem variable in script tag and put somewhere in your body:
<script id="newItem-template" type="text/x-custom-template">
<tr class="item"><td><button>Delete</button></td>
<td>New item</td><td></td><td></td><td></td><td>
<select name="" id="" class="itemType"><option value="-1"></option>
<option value="i">Iron</option><option value="c">Copper</option>
<option value="w">Wood</option></select></td></tr>
</script>
Browser will simply ignore this, until you call html() method to return that content.
So instead of this:
var newItem = $('<tr class="item"><td><button>Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id="" class="itemType"><option value="-1"></option><option value="i">Iron</option><option value="c">Copper</option><option value="w">Wood</option></select></td></tr>');
In your javascript file you will have only this:
var newItem = $('#newItem-template').html();
Here is optimized working code: jsFiddle
This is jQuery way to manage with templates, but there is powerful template engines if your project get bigger:
JavaScript templating engines

jQuery expandable table row

I am using a plugin that allows me to utilize tables with an expansion section which will show more content when clicked.
While the plugin is working, I am trying to tweak a piece of code and can't quite get it right.
There is a click event on the whole row and if my row contains a link, its navigating to the link as well as expanding the row which is not desired behavior. I would like to make the click event only happen when clicking the expansion arrow.
$('.table-expandable').each(function() {
var table = $(this);
table.children('thead').children('tr').append('<th></th>');
table.children('tbody').children('tr').filter(':odd').hide();
// This is the event that is linked to the whole table row
table.children('tbody').children('tr').filter(':even').click(function() {
var element = $(this);
element.next('tr').toggle('slow');
element.find(".table-expandable-arrow").toggleClass("up");
});
table.children('tbody').children('tr').filter(':even').each(function() {
var element = $(this);
element.append('<td><div class="table-expandable-arrow"></div></td>');
});
});
I tried adding in another piece of logic to the event but that didn't work:
table.children('tbody').children('tr').filter(':even').find('.table-expandable-arrow').click(function() {
Any ideas of what I can try to have the arrow be the trigger instead of the whole row?
Update:
<tr class="primaryValue ">
<td class="small"><a target="_BLANK" href="tool.php?tool=30">30</a></td>
<td class="small">Quickload</td>
<td class="small">Web</td>
<td class="small">John Doe</td>
<td class="small">john#test.com</td>
<td class="small">Omaha</td>
<td class="small">123456</td>
<td class="small">N/A</td>
<td>
<div class="table-expandable-arrow"></div>
</td>
</tr>

The problem with your code is that by that time that you search for .table-expandable-arrow - there is still no such element in your DOM (this element is created only in the after the this call).
Instead - you can change your code to make sure to attach the click event to the arrow during the creation of the element.
Here is an example:
(function ($) {
$(function () {
$('.table-expandable').each(function () {
var table = $(this);
table.children('thead').children('tr').append('<th></th>');
table.children('tbody').children('tr').filter(':odd').hide();
table.children('tbody').children('tr').filter(':even').each(function () {
var element = $(this);
arrowElement = $('<div class="table-expandable-arrow"></div>')
arrowElement.on('click', function () {
$(this).parents('tr').next('tr').toggle('slow');
$(this).toggleClass("up");
});
td = $('<td></td>').append(arrowElement)
element.append(td);
});
});
});
})(jQuery);
table.table-expandable > tbody > tr:nth-child(odd) {
cursor: auto !important;
}
.table-expandable-arrow {
cursor: pointer;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Expandable-Bootstrap-Table-Rows/css/bootstrap-table-expandable.css">
<div class="container">
<h1 style="margin-top:150px;">jQuery Bootstrap Table Expandable Demo</h1>
<table class="table table-hover table-expandable table-striped">
<thead>
<tr>
<th>Country</th>
<th>Population</th>
<th>Area</th>
<th>Official languages</th>
</tr>
</thead>
<tbody>
<tr>
<td>United States of America</td>
<td>306,939,000</td>
<td>9,826,630 km2</td>
<td>English</td>
</tr>
<tr>
<td colspan="5"><h4>Additional information</h4>
<ul>
<li>USA on Wikipedia</li>
<li>National Atlas of the United States</li>
<li>Historical Documents</li>
</ul></td>
</tr>
<tr>
<td>United Kingdom </td>
<td>61,612,300</td>
<td>244,820 km2</td>
<td>English</td>
</tr>
<tr>
<td colspan="5"><h4>Additional information</h4>
<ul>
<li>UK on Wikipedia</li>
<li>Official tourist guide to Britain</li>
<li>Official Yearbook of the United Kingdom</li>
</ul></td>
</tr>
<tr>
<td>India</td>
<td>1,147,995,904</td>
<td>3,287,240 km2</td>
<td>Hindi, English</td>
</tr>
<tr>
<td colspan="5"><h4>Additional information</h4>
<ul>
<li>India on Wikipedia</li>
<li>Government of India</li>
<li>India travel guide</li>
</ul></td>
</tr>
<tr>
<td>Canada</td>
<td>33,718,000</td>
<td>9,984,670 km2</td>
<td>English, French</td>
</tr>
<tr>
<td colspan="5"><h4>Additional information</h4>
<ul>
<li>Canada on Wikipedia</li>
<li><a href="http://atlas.gc.ca/site/index.html" >Official
Government of Canada online Atlas of Canada</a></li>
<li>Canada travel guide</li>
</ul></td>
</tr>
<tr>
<td>Germany</td>
<td>82,060,000</td>
<td>357,021 km2</td>
<td>German</td>
</tr>
<tr>
<td colspan="5"><h4>Additional information</h4>
<ul>
<li>Germany on Wikipedia</li>
<li>Deutschland.de Official Germany portal</li>
<li>Germany Travel Info</li>
</ul></td>
</tr>
</tbody>
</table>
Note that I also added some css changes to make sure the cursor is not set to pointer when you hover the entire row, but only on the arrow.

Show message when RowFilter doesn't match

I'm creating a RowFilter with JavaScript for my table, everything works fine but when text from search input doesn't match I would like to show a message (No results found... inside the table in a < td >) but I don't know exactly how to do that, here is my HTML:
<div class="container">
<input class="form-control" type="text" id="buscar" placeholder="search..." />
<hr />
<div class="row">
<table class="table table-striped" id="Tabla">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Level</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>This is my name</td>
<td>Level Master 45</td>
</tr>
<tr>
<td>2</td>
<td>This is my name number 2</td>
<td>Level Master 1</td>
</tr>
<tr>
<td>3</td>
<td>This is my name number 3</td>
<td>Level Mastermind 4</td>
</tr>
</tbody>
</table>
<hr />
</div>
</div>
And here is the JS:
$(document).ready(function () {
RowFilter();
});
function RowFilter() {
var busqueda = document.getElementById('buscar');
var table = document.getElementById("Tabla").tBodies[0];
buscaTabla = function() {
texto = busqueda.value.toLowerCase();
var r = 0;
while (row = table.rows[r++]) {
if (row.innerText.toLowerCase().indexOf(texto) !== -1)
row.style.display = null;
else {
row.style.display = 'none';
}
}
}
busqueda.addEventListener('keyup', buscaTabla);
}
And here is a demo in JSFiddle
Working Example
I tried to show an alert in the else part of the while in the js function but the alert is shown a lot of times (while row = table.rows[r++]). Thanks in advance.

Here's a fork of your original JSFiddle that displays a message when there are no search results.
https://jsfiddle.net/reid_horton/yg98jqcj/
First, add the element you wish to display to the HTML above (or in) your table.
<div id="no-results">
No results!
</div>
Set it to hide by default.
#no-results {
display: none;
}
To detect when there are no search results, change your loop to this.
var didMatch = false;
var r = 0;
while (row = table.rows[r++]) {
if (row.innerText.toLowerCase().indexOf(texto) !== -1) {
row.style.display = null;
didMatch = true;
} else {
row.style.display = 'none';
}
}
if (!didMatch) {
noResults.style.display = 'block';
} else {
noResults.style.display = 'none';
}
The didMatch variable is used to keep track of if any results matched. When it is true, you hide #no-results, and when it is false, you show it.

Try it
$(document).ready(function(){
$("#buscar").on("input",function(){
$value = $(this).val();
$("tr").not(":first").hide();
$len = $("td:contains(" + $value + ")").closest("tr").show().length;
if($len < 1)
$(".no").show(1000);
else
$(".no").hide();
})
})
Final code :
<html>
<title>This is test</title>
<head>
<style>
.no {
border: 1px solid gray;
text-align: center;
background-color: skyblue;
padding: 5px;
color: #fff;
display: none;
}
</style>
</head>
<body>
<div class="container">
<input class="form-control" type="text" id="buscar" placeholder="search..." />
<hr />
<div class="no">No Result</div>
<div class="row">
<table class="table table-striped" id="Tabla">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Level</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>This is my name</td>
<td>Level Master 45</td>
</tr>
<tr>
<td>2</td>
<td>This is my name number 2</td>
<td>Level Master 1</td>
</tr>
<tr>
<td>3</td>
<td>This is my name number 3</td>
<td>Level Mastermind 4</td>
</tr>
</tbody>
</table>
<hr />
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#buscar").on("input",function(){
$value = $(this).val();
$("tr").not(":first").hide();
$len = $("td:contains(" + $value + ")").closest("tr").show().length;
if($len < 1)
$(".no").show(1000);
else
$(".no").hide();
})
})
</script>
</body>
</html>

How to load list.js dynamically through ajax and for sort to continue working

I have a static HTML page which loads dynamic tables using Ajax. The tables I want to load are sortable tables built using list.js and jQuery. When the tables are coded in line they load and are sortable without issue. As soon as I introduce Ajax, the data appears but sorting no longer works.
I am aware of binding and .on() but I am not sure how to get it working with list.js
Example Code:
<html>
<head>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"
src="//listjs.com/js/list.js"
$(document).ready(function(){
// Define value names
var overview_options = { valueNames: [ 'name', 'term', 'module', 'activity' ] };
// Init list
var overviewList = new List('list_overview', overview_options);
});
function loadTable() {
getTable=new XMLHttpRequest();
getTable.onreadystatechange=function()
{
if (getTable.readyState==4 && getTable.status==200)
{
document.getElementById("tableArea").innerHTML=getTable.responseText;
}
}
getTable.open("GET","tableDate.html",true);
getTable.send();
}
</script>
</head>
<body>
<div onClick="loadTable();">Load Table</div>
<div id="tableArea"></div>
</body>
</html>
And the file Ajax is pulling in:
<div class="list_holder">
<table id="list_overview" cellpadding="10" >
<thead>
<tr>
<th><span class="sort" data-sort="name">Name</span></th>
<th><span class="sort" data-sort="term">Term</span></th>
<th><span class="sort" data-sort="module">Module</span></th>
<th><span class="sort" data-sort="activity">Activity</span></th>
</tr>
</thead>
<tbody class="list">
<tr>
<td class="name">Zack Walker</td>
<td class="term">3</td>
<td class="module">Body Language</td>
<td class="activity">None</td>
</tr>
<tr>
<td class="name">Peter Jones</td>
<td class="term">1</td>
<td class="module">Body Language</td>
<td class="activity">All</td>
</tr>
<tr>
<td class="name">Zack Walker</td>
<td class="term">3</td>
<td class="module">Helping</td>
<td class="activity">All</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
Many thanks!

Just guessing here, shouldn't you be initializing the list after you populate the data in your ajax response?