Imitate mouse click

Question

I need to imitate the mouse click on the "Name" td after drawing the table, so it seems that sorting by default name.

var link = "https://jsonplaceholder.typicode.com/users"; var usersData = []; $(".buttonLoad").click(function () { $(".buttonLoad").remove(); $.getJSON(link, function (data) { usersData = data; // Table draw for(var i = 0; i < usersData.length; i++){ $("#users").append("<tr><td>" + usersData[i].id + "</td>" + "<td>" + usersData[i].name + "</td>" + "<td>" + usersData[i].username + "</td>" + "<td>" + usersData[i].email + "</td>" + "<td>" + usersData[i].address.street + "</td>" + "<td>" + usersData[i].address.suite + "</td>" + "<td>" + usersData[i].address.city + "</td>" + "<td>" + usersData[i].address.zipcode + "</td>" + "<td>" + usersData[i].address.geo.lat + "</td>" + "<td>" + usersData[i].phone + "</td>" + "<td>" + usersData[i].website + "</td>" + "<td>" + usersData[i].company.name + "</td>" + "<td>" + usersData[i].company.catchPhrase + "</td>" + "<td>" + usersData[i].company.bs + "</td></tr>" ) } }); $("table").removeClass("hide"); $('th.sort').click(function(){ var table = $(this).parents('table').eq(0) var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index())) this.asc = !this.asc; if (!this.asc){rows = rows.reverse()} for (var i = 0; i < rows.length; i++){table.append(rows[i])} }) function comparer(index) { return function(a, b) { var valA = getCellValue(a, index), valB = getCellValue(b, index) return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB) } } function getCellValue(row, index){ return $(row).children('td').eq(index).html() } }); 

 .hide{ display: none; } button{ margin: 3px; } table { width: 100%; margin: auto; margin: 3px; } table th { font-weight: bold; } table th, table td { padding: 3px; border: 1px solid #000; } thead th{ font: bold italic 100% sans-serif; background-color: #f7e1b5; } .sort{ cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <button class="buttonLoad">Load data</button> <table id="users" border="1" class="hide"> <thead> <tr> <th>ID</th> <th class="sort" id="defaultSort">Name</th> <th class="sort">Username</th> <th class="sort">Email</th> <th class="sort">Street</th> <th>Suite</th> <th>City</th> <th>Zipcode</th> <th>Geo</th> <th>Phone</th> <th>Website</th> <th class="sort">CompanyName</th> <th>CatchPhrase</th> <th>bs</th> </tr> </thead> </table> 

Things like .trigger("click") or element.click() don't work at all.

Answer 1

Methods like click or trigger should be called after your dom elements are ready for the goal you want to achieve.

if your case, you tried to sort them by, the elements are completely loaded onto the page, so any solution that you try will simply not work, because we are missing something here.

Now consider this modified version of your getJson function:

  $.getJSON(link, function(data) { usersData = data; // Table draw for (var i = 0; i < usersData.length; i++) { $("#users").append("<tr><td>" + usersData[i].id + "</td>" + "<td>" + usersData[i].name + "</td>" + "<td>" + usersData[i].username + "</td>" + "<td>" + usersData[i].email + "</td>" + "<td>" + usersData[i].address.street + "</td>" + "<td>" + usersData[i].address.suite + "</td>" + "<td>" + usersData[i].address.city + "</td>" + "<td>" + usersData[i].address.zipcode + "</td>" + "<td>" + usersData[i].address.geo.lat + "</td>" + "<td>" + usersData[i].phone + "</td>" + "<td>" + usersData[i].website + "</td>" + "<td>" + usersData[i].company.name + "</td>" + "<td>" + usersData[i].company.catchPhrase + "</td>" + "<td>" + usersData[i].company.bs + "</td></tr>") } // finished loading, now sort by name $(".sort.default").click(); }); 

Don't worry about this default class inside the jQuery selector described below :)

this is my approach to make it work:

1- I marked th by default, which you need to sort first with an extra class (with default name)

2- Then I added a call to simulate the click action after when the data is loaded (using a selector with a standard class into account)

 // finished loading, now sort by name $(".sort.default").click(); 

and here is the link to the full working script: https://jsfiddle.net/hakeero/rfeh0q7v/1/

Answer 2

You should create a sort(th) function that you can call from anywhere in the world, so you don’t have to worry about emulating a click or hack.

1. Extract the sort instructions from $('th.sort').click() and put them in the function defined as follows:

 function sort(th) { var table = $(th).parents('table').eq(0) var rows = table.find('tr:gt(0)').toArray().sort(comparer($(th).index())) th.asc = !th.asc; if (!th.asc){rows = rows.reverse()} for (var i = 0; i < rows.length; i++){table.append(rows[i])} } 

2. Sort by name

 $.getJSON(link, function (data) { ... // sorting by name as the default action sort($("#defaultSort")); }); 

3.change $('th.sort').click() respectively.

 $('th.sort').click(function(){ sort(this); }) 

click here for your convenience

Answer 3

Since you are not using the click event, you can simply drop the function from the .click () form

 function clickHandler(){...} .click(clickHandler) 

then you can just call clickHandler () if you want this action