在jquery中切换li

Question

我有以下清单：

<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都是动态创建的。现在，如果我点击一个李，那么孩子李(S)应该是切换。我正在尝试下面的代码，但它不起作用：

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

如何解决这个问题？

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

Answer 1

您必须使用.on方法。JSFIDDLE

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

Answer 2

由于您正在动态地生成uls和lis，所以click在这里无法工作。用在……上面代替-

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

Answer 3

有几个错误，但它的工作方式如下：

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

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