Imitate mouse click

Question

I need to imitate mouse click on "Name" td after table draws, so it looks like sorting by name is default.

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

Calls to methods like click or trigger should be made after your dom elements are ready for the purpose of the scenario that you want to achieve.

if your case, you were trying to sort them before the elements are fully loaded into the page, so whatever solution that you will be trying, it will simply not work cause that 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, it's described down below :)

this is my approach to get it working:

1- I've marked the default th that you need to initially sort by with an additional class (named default)

2- I've then added a call to simulate the click action after the data is loaded (using a selector with the default class into account)

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

and here is a link to the complete working fiddle: https://jsfiddle.net/hakeero/rfeh0q7v/1/