tags:

views:

71

answers:

3

Im currently using jquery to link all td's to the edit link but i want to be able to only target the td's with the class of edit, and I need the link to find the a tag with the class edit-action.

Any help would be great!

Current code:

$("tr.edit").click(function(){
 if(!clicking)
 {
  clicking = true;
  $('a.edit-action', this).click();
  clicking = false;
 }
});



<table align="center" width="100%" id="Table" >
 <tr>
  <th width="20%">col 1</th>
  <th width="20%">col 1</th>
  <th width="25%">col 1</th>
  <th width="25%">col 1</th>
  <th width="10%">col 1</th>
 </tr>
 <tr class="edit">   
  <td width="20%" class="edit">name</td>
  <td width="20%" class="edit">type</td>
  <td width="25%">other 1</td>
  <td width="25%">other 2</td>
  <td width="10%" class="action"><a href="#" class="dialog edit-action">Edit</a><br>Another delete link here</td>

 </tr>
</table>
A: 
$("tr .edit").click(function(){
        if(!clicking)
        {
                clicking = true;
                $(this).find(".edit-action").click();
                clicking = false;
        }
});
andres descalzo
+2  A: 

Use .live, better than having hundreds of separate click events.

Also note you cannot emulate a user click on an anchor to open a new page for instance but it will run any script click handler on the anchor.

$("td.edit").live('click', function(){
        $(this).parent().find('a.edit-action').bla
});
redsquare
Thanks worked a charm! im pretty new to jquery so thanks for the help.
John
`.live()` is the new Javascript. +1!
JorenB
+1  A: 

Modify your first selector to select only those cells which have edit class.

$("td.edit").click(function(){
        if(!clicking)
        {
                clicking = true;
                $('a.edit-action', this).click();
                clicking = false;
        }
});

Also, you should be able to get rid of the 'clicking' state variable if you create a separate function handler for click events. E.g.

$('a.edit-action').click(editActionLinkClicked);

$("td.edit").click(editActionLinkClicked);

EDIT

Thinking about it some more, use event delegation.

$('#table').click( //Fired when user clicks any element on the table
   function()
   {
       if($(this).hasClass('edit-action') || $(this).hasClass('edit'))
       {
            //Your click event logic. 
            //You don't have to keep track of state or anything. 
       }
   }
);
SolutionYogi
thanks very much for your help im all sorted now. First time ive used this site to post a quetion myself and feedback was great. cheers!
John