0

我有以下列表：

<ul id="tree" class="main-bur-list">
    <li class="top-role-list role_ABM">
        <div class="bu-represent-role" data-sbu_id="6" data-bu_id="1" data-role="2" data-user_id="189984" data-isfetched="1">abhishek.j@asda(ABM - PMP, CISSP - East Coast)</div>
        <ul id="tree" class="main-bur-list">
            <li class="top-role-list role_TL">
                <div class="bu-represent-role" data-sbu_id="6" data-bu_id="1" data-role="3" data-user_id="141590" data-isfetched="1">irfanbaig@gfdgdf(TL - PMP, CISSP - East Coast)</div>
                <ul id="tree" class="main-bur-list">
                    <li class="top-role-list role_ISM">
                        <div class="bu-represent-role" data-sbu_id="6" data-bu_id="1" data-role="4" data-user_id="185359" data-isfetched="0">neelamtest2112@gmail.com(ISM - PMP, CISSP - East Coast)</div>
                    </li>
                    <li class="top-role-list role_ISM" style="display: list-item;">
                        <div class="bu-represent-role" data-sbu_id="6" data-bu_id="1" data-role="4" data-user_id="164909" data-isfetched="0">mohan.krishna@dggdfm(ISM - PMP, CISSP - East Coast)</div>
                    </li>
                    <li class="top-role-list role_ISM" style="display: list-item;">
                        <div class="bu-represent-role" data-sbu_id="6" data-bu_id="1" data-role="4" data-user_id="174582" data-isfetched="0">ritwik.m@sdfsd(ISM - PMP, CISSP - East Coast)</div>
                    </li>
                    <li class="top-role-list role_ISM" style="display: list-item;">
                        <div class="bu-represent-role" data-sbu_id="6" data-bu_id="1" data-role="4" data-user_id="194026" data-isfetched="0">Wasim.s@fdsfs(ISM - PMP, CISSP - East Coast)</div>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="top-role-list role_ABM">
        <div class="bu-represent-role" data-sbu_id="9" data-bu_id="1" data-role="2" data-user_id="176794" data-isfetched="0">sachin.k@dfsfsd(ABM - CTFL, Cloud, Prince 2, FRM, CFA (All US))</div>
    </li>
    <li class="top-role-list role_ABM">
        <div class="bu-represent-role" data-sbu_id="7" data-bu_id="1" data-role="2" data-user_id="189984" data-isfetched="0">abhishek.j@dasdas(ABM - PMP, CISSP - West Coast)</div>
    </li>
    <li class="top-role-list role_ABM">
        <div class="bu-represent-role" data-sbu_id="7" data-bu_id="1" data-role="2" data-user_id="189984" data-isfetched="0">abhishek.j@dasdsa(ABM - PMP, CISSP - West Coast)</div>
    </li>
</ul>

所有 ul 和 li 都是动态创建的。现在，如果我单击 li，则子 li(s) 应该正在切换。我正在尝试以下代码，但它不起作用：

$('.bu-represent-role').click(function(){
        $('.main-bur-list ul li').next().toggle();
});

这个问题怎么排序？

更新：http: //jsfiddle.net/srimanta12/F4apy/

4

3 回答 3

1

你必须使用.on方法。JSFIDDLE

$('body').on('click', '.bu-represent-role', function (e) {
    $(e.target).next().toggle();
});
于 2013-08-23T07:33:25.720 回答
0

由于您正在动态生成uls 和lis，click因此无法在此处工作。改用on -

$(document).on('click', '.bu-represent-role', function(){
    $('.main-bur-list ul li').next().toggle();
});
于 2013-08-23T07:08:56.187 回答
0

有一些错误，但它的工作原理是这样的：

$(document).on('click', '.bu-represent-role', function (e) {
    $(e.target).next().toggle();
});

http://jsfiddle.net/F4apy/2/

于 2013-08-23T07:29:30.860 回答