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

ulおよびを動的に生成しているためli、clickここでは機能しません。代わりにonを使用-

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