Restrict JQuery Event to div

Question

I am trying to restrict the event to just the "manage" div. When I try open the other divs and close them its triggering all the events on the page. I don't want to use specific ID's for each div and would like it just to control whats in one.

here is the fiddle http://jsfiddle.net/dalond/9Lo0rukh/

and here is the JS

$(document).ready(function() {
    $('.grey_button.close').live('click', function() {
        $('.grey_button.open').click();
        $('.job_description').hide();
        $(this).siblings('.job_description').show();
        $(this).toggleClass('close open');
        return false;
    });
    $('.grey_button.open').live('click', function() {
        $('.job_description').hide();
        $(this).toggleClass('close open');
        return false;
    });
});

Answer 1

jQuery < 1.7

You can specify the event handler to apply to .grey_button elements within the .manage div in your selector:

$('.manage .grey_button').live('click', function() {
    $(this).prev('.job_description').toggle();
    $(this).toggleClass('close open');
    return false;
});

Fiddle

Note: handlers combined, using .toggle() on .job_description as mentioned below.

jQuery > 1.7

You can delegate the click event to .grey_button elements within the .manage div. This is the "modern" approach anyway, as live is deprecated.

You can also replace the two event handlers with one, and use .toggle() to define the open/close for the description.

$('.manage').on('click', '.grey_button', function() {
    $(this).prev('.job_description').toggle();
    $(this).toggleClass('close open');
    return false;
});

Fiddle