隐藏引导程序下拉菜单时如何放置事件？

Question

I have the following 2 functions: filterbuttons and getTableData.

The first function decides whether the call to counter should or should not appear on the table rows. The second function builds the table data based on retrieved information from database.

function filterButtons(status) {
    $append = "";
    if (status == "PENDING") {
        $append = "<td class='dropdown'><a id='call' class='btn btn-primary actionButton' data-toggle='dropdown'> Call to Counter </a><a class='btn btn-danger cancelbtn' > Cancel </a></td>";
    } else if (status== "SERVING") {
        $append = "<td><a class='btn btn-danger cancelbtn' > Cancel </a><a class='btn btn-success donebtn'>Done</a></td>";
    }
        return $append;
    }

    function getTableData() {
        $.ajax({
            url: 'inc/php/fetch_data.php',
            type: 'POST',
            async: false,
            data: 'data=gettabledata',
            datatype: "text",
            success: function (data) {
                console.log(1);
                $('.table-hover tbody').empty();    //refresh the table data
                dataArray = JSON.parse(data);           //covert data from server to js array
                $.each(dataArray, function (key, value) {
                    $('.table-hover tbody').append("<tr><td>" + value[0] + "</td><td><font size='3px'>" + value[1] + "</font></td><td><font size='3px'><b>" + value[2] + "</b></font></td><td><font size='3px'>" + value[3] + "</font></td><td><font size='3px'>" + value[4] + "</font></td><td><font size='3px'>"+value[5]+"</font></td>"+filterButtons(value[2])+"</tr>");
                }); 

                $(".actionButton").click(function () {  
                    //move dropdown menu
                    $(this).after($dropdown);

                   // clearInterval(counter);
                   // clearInterval(table);
                    // $(".actionButton").click(function(){
                    //     table = setInterval(getTableData,150);
                    // });
                });

                $(".dropdown").on('hide.bs.dropdown', function(){
                        console.log("hide method called");
                    });


                $(".cancelbtn").click(function (){
                    var id = $(this).closest("tr").children().first().html();
                    if(confirm("Are you sure you want to cancel the transaction?")){


                        $.ajax({
                            url: 'inc/php/fetch_data.php',
                            type:'POST',
                            async: false,
                            data:'data=canceltrans&id='+id,
                            datatype:'text',
                            success: function(data){
                                if(data=="1"){
                                    console.log("Cancel Successful!");
                                }
                            }
                        });
                    }
                });

                $(".donebtn").click(function(){
                    var id = $(this).closest("tr").children().first().html();

                    $.ajax({
                        url: 'inc/php/fetch_data.php',
                        type: 'POST',
                        async: false,
                        data: 'data=completetrans&id='+id,
                        datatype:'text',
                        success: function(data){
                            if (data=="1"){
                                console.log("Transaction Completed");
                                location.reload();
                            }
                        }
                    });
                });
            }
        });  

        $.ajax({
            url:'inc/php/fetch_data.php',
            type: "POST",
            async: false,
            data: "data=getavailcounter",
            datatype: "text",
            success: function (data){
                $dropdown.empty();
                dataArray = JSON.parse(data);
                $dropdown.append('<li><a class="Label">Select Counter:</a></li>');
                $.each(dataArray, function (key,value){
                    $dropdown.append('<li><a class="counterLink" role="menu">'+value+'</a></li>');
                });

                //CODE FOR CLICK FUNCTION on select counter from dropdown
                $(".counterLink").click(function (){
                    console.log("Counter CLicked!");
                    table = setInterval(getTableData,150);
                    var counter = $(this).html();
                    var id = $(this).closest("tr").children().first().html();
                    $.ajax({
                        url: 'inc/php/fetch_data.php',
                        type: 'POST',
                        async: false, 
                        data: "data=calltrans&id="+id+"&counter="+counter,
                        datatype:"text",
                        success: function (data){
                            if(data=="1"){
                                console.log("Call Successful!");
                            }
                            else{
                                console.log("Unsuccessful!");
                            }
                            location.reload();
                        }

                    });
                });
            }
        });   
    }

I've read some info online on how to do this and I got the following code to put the function to be executed when the dropdown is closed:

$(".dropdown").on('hide.bs.dropdown', function(){
    console.log("hide method called");
});

I added that code to the function getTableData just right after the click function for the button with dropdown. When I tried it, nothing comes up on my console so it must not be reaching that portion of my code. Can anybody please tell me why?

Answer 1

Sorry for the dumb question. I just realized that it was a problem with the bootstrap imports.