Ограничить событие JQuery до div

Question

Я пытаюсь ограничить событие только "управлять" div. Когда я пытаюсь открыть другие div и закрыть их, запускаются все события на странице. Я не хочу использовать конкретные идентификаторы для каждого div и хотел бы просто контролировать то, что в одном.

вот скрипка http://jsfiddle.net/dalond/9Lo0rukh/

а вот и 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

Вы можете указать обработчик события для применения .grey_button элементы внутри .manage div в вашем селекторе:

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

скрипка

Примечание: обработчики объединены, используя .toggle() на .job_description как упомянуто ниже.

JQuery > 1,7

Вы можете делегировать событие клика .grey_button элементы внутри .manage дела. Это "современный" подход в любом случае, так как live устарела.

Вы также можете заменить два обработчика событий на один и использовать .toggle() определить открытие / закрытие для описания.

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

скрипка