jquery nested selection does not work

i am creating a select button in HTML and jQuery but button`s selection in jQuery does not work. my HTML file is:

<div class="back_gray_light sideBar_content" id="sideBar_mostRate_selectYear">
        <div id="sideBar_selectYear">
            <div id="sideBar_selectYear_button">
                <button type="button">
                    <img src="/static/icons/100film/arrow_button.png">
                </button>
            </div>
            <div id="sideBar_selectedYear">
                <p>
                    1394
                </p>
            </div>
            <div id="sideBar_allYears_hide">
                <button type="button" class="sideBar_year_hide sideBar_year_item">
                    <p>
                        1394
                    </p>
                </button>
                <button type="button" class="sideBar_year_hide sideBar_year_item">
                    <p>
                        1393
                    </p>
                </button>

            </div>
        </div>
    </div>

and my jQuery file is:

$(document).ready(function(){

    console.log('start');

    $('#sideBar_selectYear_button button').click(function(event){
        console.log('select year');
        $('#sideBar_allYears_hide').slideDown();
    });

});

the output in console is:

start

and my program does not print select year.