CODEWITHSUNDEEP
jquery
John
John

Reputation:

Jquery td click

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>

Upvotes: 1

Views: 6781

Answers (3)

SolutionYogi
SolutionYogi

Reputation: 32233

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. 
       }
   }
);

Upvotes: 1

redsquare
redsquare

Reputation: 78667

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
});

Upvotes: 4

andres descalzo
andres descalzo

Reputation: 14967

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

Upvotes: 0

Related Questions