Linked event listeners using jQuery

Question

I have this HTML structure

<div class="buttons">
    <button data-icon="ui-icon-disk" class="save">Save1</button>
    <button data-icon="ui-icon-check" class="ok">OK1</button>
    <button data-icon="ui-icon-trash" class="delete">Delete1</button>
    <button data-icon="ui-icon-close" class="close">Close1</button>
</div>

There are many blocks in the page like this one.
Some buttons come with click handlers functions (save and delete buttons).

What I want to do is: if someone click on an ok button, the corresponding save button click bound function should run.

My code:

$('.save').click(function(){
    alert('save');
});
$('.ok').click(function(){
    $('.save').click();
});

This is wrong, when I click on a ok button all save buttons fires... not only the one within the same buttons group.

Demo illustrating my problem.

jQuery's documentation is helpful too: api.jquery.com/category/traversing/tree-traversal — Felix Kling
– Felix Kling, Commented Jun 15, 2012 at 13:50

ThiefMaster · Accepted Answer · 2012-06-15 13:51:15Z

5

Use $(this).siblings('.save').click() to select only siblings of the clicked button instead of all matching buttons in the whole document.

Demo: http://jsfiddle.net/ThiefMaster/nMnm7/2/
Docs: http://api.jquery.com/siblings/

edited Jun 15, 2012 at 13:51

answered Jun 15, 2012 at 13:46

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

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

Comments

ilyes kooli · Accepted Answer · 2012-06-15 13:47:51Z

4

use siblings

$('.ok').click(function(){
    $(this).siblings('.save').click();
});

DEMO

answered Jun 15, 2012 at 13:47

ilyes kooli

12.1k14 gold badges55 silver badges81 bronze badges

Comments

Steeven · Accepted Answer · 2012-06-15 13:48:50Z

1

http://api.jquery.com/siblings/

$('.ok').click(function(){
   $(this).siblings(".save").click();
});

answered Jun 15, 2012 at 13:48

Steeven

4,2409 gold badges42 silver badges71 bronze badges

Collectives™ on Stack Overflow

Linked event listeners using jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related