如何将子菜单添加到单击的按钮

Question

I have dropdown list like this:

Which consists of a few buttons. On click on either of this marked buttons sub-menu should appear with some data that I'm getting via AJAX . So, eventually it should look like this:

This is the code of my dropdown:

<ul class="dropdown-menu">
                <?php
                foreach($applications as $application){

                echo "<li><button type='button' style='width:100%;' value='".$application['facebook_id']."' onclick='setSession(this.value);'>".$application['app_name']."</button></li>";

                } ?>
                <?php if($resultForUpperQuery){
                echo '<hr>';
                while($names=$resultForUpperQuery->fetch_assoc()){
                $groupname=$names['ime_grupe'];
                echo "<li><button type='button' style='width:100%;' value='".$groupname."' onclick='showDetails(this.value);'>".$groupname."</button></li>";
                }
                echo '<hr>';
                }
                ?>
                <?php if(isset($_SESSION['ap_id'])){
                echo '
                <li><a href="" data-target="#createAppGroup" data-toggle="modal">Create App Group</a></li>';}?>
                <li><a href="app_setup.php">Add new app</a></li>
    </ul>

So each button has onclick="showDetails(this.value)" functions which looks like this:

function showDetails(o){

            var data    = {};
            var groupName = o;

            data.action2='showConsistsOf';
            data.groupName=groupName;
            $.ajax({
                url: "../includes/adapter.php",
                type: "POST",
                dataType: "JSON",
                data: data,
                async: true,
                success: function (data) {
                    if(data){
                        //console.log(data);
                        for(var i=0;i<data.length;i++){
                        $('button[value=groupName]').append('<li>+data[i]+</li>');
                        }
                    }
                    else {

                    }
                }
            });
        }

And data retrieved looks like this:

["Notiflow", "Konfidence Hrvatska"]

So, its basically as array whose values should be part of submenu dropdown. And I tried to make this submenu like this, as you can see from above code as well:

success: function (data) {
    if(data){
        console.log(data);
        for(var i=0;i<data.length;i++){
            $('button[value=groupName]').append('<li>+data[i]+</li>');
        }
    }
}

So foreach value in data I tried to append <li> to button which click fired the function. But click on button just closes the dropdown. Really don't know how to solve this.

Answer 1

尝试这样调用您的函数：

$(".dropdown-menu").on("click", ".button", function() {.......} );