在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都是动态创建的。 现在，如果我单击一个li，则子li应该切换。 我正在尝试以下代码，但无法正常工作：

$('.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

由于您是动态生成ul和li的，因此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/