jquery How to trigger click of links with same class but different text

Question

I need to trigger the click event of a link in my table. Each link has the same class, but different values/text.

Take for example an employee table with two columns for the ID and Name. The first column contains the link for each employee ID. When a link is clicked, it will show an alert box showing the same ID.

Say I have a textbox, where user will input Emp ID. By clicking a button, the click event of the link with the same Emp ID in the table shall be triggered.

NOTE: My web app does more than this. I just need a way on how I can trigger the click event of each link and get its corresponding text.

$(".lnkid").on("click", function() {
  var id = $(this).text();
  alert("Emp. ID: " + id);
});

$("#btntriggerlink").on("click", function() {
  var trigger_id = $("#txtid").val();
  //code to trigger click event goes here
});

.lnk-ref {
  text-decoration: underline;
  cursor: pointer;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <table border="1">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
      </tr>
      <tr>
        <td><a class='lnkid lnk-ref'>1001</a></td>
        <td>Maria Rose</td>
      </tr>
      <tr>
        <td><a class='lnkid lnk-ref'>1002</a></td>
        <td>Adler Brown</td>
      </tr>
      <tr>
        <td><a class='lnkid lnk-ref'>1003</a></td>
        <td>Sonjia Dean</td>
      </tr>
    </thead>
  </table>
  <br> Input Employee Number: <input type="text" id="txtid" />
  <button id="btntriggerlink">Trigger Link Event</button>
</div>

Here is a jsfiddle for this Thanks in advance for whatever help I can get. :)

Rory McCrossan · Accepted Answer · 2018-11-08 09:17:20Z

1

You have two issues in your code. Firstly, the class on the a elements is lnkid, not linkid. Secondly, eq() is used to select an element by its index, whereas you want to select it by its text. To do that you can use filter(), like this:

$(".lnkid").on("click", function() {
  var id = $(this).text();
  alert("Emp. ID: " + id);
});

$("#btntriggerlink").on("click", function() {
  var trigger_id = $("#txtid").val().trim();
  $(".lnkid").filter(function() {
    return $(this).text().trim() == trigger_id;
  }).trigger('click');
});

.lnk-ref {
  text-decoration: underline;
  cursor: pointer;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <table border="1">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
      </tr>
      <tr>
        <td><a class='lnkid lnk-ref'>1001</a></td>
        <td>Maria Rose</td>
      </tr>
      <tr>
        <td><a class='lnkid lnk-ref'>1002</a></td>
        <td>Adler Brown</td>
      </tr>
      <tr>
        <td><a class='lnkid lnk-ref'>1003</a></td>
        <td>Sonjia Dean</td>
      </tr>
    </thead>
  </table>
  <br> Input Employee Number: <input type="text" id="txtid" />
  <button id="btntriggerlink">Trigger Link Event</button>
</div>

An alternative to filter() is :contains, but note that the latter will hit on any element which contains the text in any location, eg: Foo 1001 bar. filter() requires an exact match.

answered Nov 8, 2018 at 9:17

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chane Over a year ago

oops, yup, i missed on one lnkid selector. anyhow, this works! thank you so much!

Collectives™ on Stack Overflow

jquery How to trigger click of links with same class but different text

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related