javascript - jquery 嵌套选择不起作用

Question

我正在用 HTML 和 jQuery 创建一个选择按钮，但是在 jQuery 中按钮的选择不起作用。我的 HTML 文件是:

<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>

我的 jQuery 文件是:

$(document).ready(function(){

    console.log('start');

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

});

控制台的输出是:

start

我的程序不打印select year。

Answer 1

请检查下面的演示。我更新了你的代码。我只是将 console.log 替换为 Alert，这样您就可以在浏览器上看到结果。您的代码运行完美，只是 # 和 问题。 .如果您使用类，则必须在类名前使用点号 (.)，如果您使用 id，则必须在 ID 名前使用 hase(#)。

我只是隐藏 sideBar_allYears_hide div 以显示下拉功能。

$(document).ready(function(){
    alert('start');
    $('#sideBar_selectYear_button button').click(function(event){
        alert('select year');
        $('#sideBar_allYears_hide').slideDown();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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" style="Display:none;">
                <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>