CODEWITHSUNDEEP
javascriptjquerytriggers
user7592363
user7592363

Reputation:

How to trigger a click of that 'link' on click of anywhere in that row?

I have a dynamically created table, with row class as "rowclass" and ids such as 1,2,3,4 etc. There is a link inside that row. I want to trigger that link i.e a on click of anywhere in that row. This is the HTML.

<tr id="40" data-id="40" data-parent="" class="rowclass act-tr-collapsed act-tr-level-0" data-level="0">
 <td id="235" style="font-weight:bold;font-size:17px;width:40%;">
  <a href="javascript:void(0)" class="act-more act-collapsed"><span class="i">+ </span></a>Nametobeappended<span id="s40" class="icon icon-info"
  </span>
 </td>
 <td id="236">
 <div style="height: 20px;position: relative;">
 <div id="d236" style="height: 20px;float:left;color: #ffffff; font-weight: bold;font-family: Arial Black; width:50%;background-color: #d00000;">
  <div style="padding-left:5px;z-index: 99;position: absolute;">50</div>
   <div style="float:right; height: 20px; background-color: rgb(102,197,232);width:0%;position: absolute; top:0; left:50%;"></div>
   </div>
  </div>
  </td>
  <td id="237">
  <div style="height: 20px;position: relative;">
   <div id="d237" style="height: 20px;float:left;color: #ffffff; font-weight: bold;font-family: Arial Black; width:50%;background-color: #d00000;">
    <div style="padding-left:5px;z-index: 99;position: absolute;">50</div>
    <div style="float:right; height: 20px; background-color: rgb(102,197,232);width:0%;position: absolute; top:0; left:50%;"></div>
   </div>
  </div>
 </td>
 <td id="238">
 <div style="height: 20px;position: relative;">
  <div id="d238" style="height: 20px;float:left;color: #ffffff; font-weight: bold;font-family: Arial Black; width:50%;background-color: #d00000;">
   <div style="padding-left:5px;z-index: 99;position: absolute;">50</div>
    <div style="float:right; height: 20px; background-color: rgb(102,197,232);width:0%;position: absolute; top:0; left:50%;"></div>
  </div>
 </div>
</td>
</tr>

This is the JQuery I've written which doesn't work.

 $('.rowclass').on("click", function(){

   idss = $(this).children().attr('id'); //td id
   $("#"+idss).find('a').trigger('click'); //want to click <a> of that particular row
 });
 console.log("id: "+idss)// says idss undefined
 $("#"+idss).find('a').click(); //doesn't work

Upvotes: 1

Views: 470

Answers (4)

Hulothe
Hulothe

Reputation: 764

If you created the rows dynamically, you need to select them this way:

JSFiddle example: https://jsfiddle.net/Hulothe/1u8scath/1/

$(document).ready(function() {
    $(document).on('click', 'tr.rowclass', function() {
        alert('o');
        $(this).children().find('a').trigger('click'); //want to click <a> of that particular row
    });

    // And you need to handle a click event on the `<a>` if you want to trigger a click on it, like this:

    $(document).on('click', 'a', function(e) {
        e.stopPropagation();
        alert('Clicked');
    });
});

Upvotes: 1

Vladut
Vladut

Reputation: 121

Try this: 



 $(document).on('click', '.rowclass', function() {
        $(this).find('a').trigger('click');
 });

LE: 

jQuery(document).ready(function(){
  jQuery(document).on('click', '.rowclass', function(e) { 
      var link = $(this).find("a");
      if (e.target === link[0]) return false; 
      link.trigger('click');
      return false;
  });
})

if (e.target === link[0]) - Here we check if the clicked element is the a tag itself. If that's so, we'll let the default behaviour happen. If not, we trigger the click on a tag

Upvotes: 0

user7592363
user7592363

Reputation:

To trigger that particular row's anchor tag onclick of that row, this is what worked:

$(document).on('click', '.rowclass', function() {
    $(this).children().find('a span').trigger('click');
    //go to td then find <a> <span> to trigger click

});

This may not be the best of solutions. I'm new to coding, so if there's a better way I would be happy to know about it. Cheers!

Upvotes: 0

Rick Jelier
Rick Jelier

Reputation: 373

To do this use this:

$(document).on('click', '.rowclass', function(e) {
    // e.target is the element you clicked on
    // .closest('tr') finds the closest parent that is an 'tr' element
    // .find('a') finds the child that is an 'a' element
    // .trigger('click') triggers a click on the found element

    $(e.target).closest('tr').find('a').trigger('click');
});

I think the problem is that the table is loaded after the event is bound to the element. $(document).on('click', 'element', function); makes sure the event is always bound, even before html is loaded.

Or that using .children returns multiple elements and so can not give a id.

Upvotes: 0

Related Questions