将JQuery事件限制为div

Question

我试图将事件限制在＆＃34; manage＆＃34; DIV。当我尝试打开其他div并关闭它时触发页面上的所有事件。我不想为每个div使用特定的ID，并且只想控制其中的一个。

这里是小提琴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＆lt; 1.7

您可以指定要应用于选择器中.grey_button div内的.manage元素的事件处理程序：

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

Fiddle

注意：处理程序使用.toggle()上的.job_description合并，如下所述。

jQuery＆gt; 1.7

您可以delegate点击.grey_button div中的.manage元素。无论如何，这是“现代”方法，as live is deprecated。

您也可以用一个替换两个事件处理程序，并使用.toggle()来定义描述的打开/关闭。

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

Fiddle