Dropdown button stops working when navigate in it using ajax

Question

Hello StackOverFlow Members,

I've used the bootstrap 5 dropdown button to get the tabs from the backend using ajax and everything is working, until I got to one of these tabs and click on a button, the dropdown stills exists and the data we got using ajax still exists, also it makes a new request so we made sure the data still exists. but when we click on that dropdown, it doesn't longer open.

code used.

    <li class="dropdownListMenu dropdown">
        <span aria-expanded="false" data-bs-toggle="dropdown" aria-haspopup="true" 
                class="active color-white pointer" data-bs-toggle="tab"
                onclick='<?php echo "get__data(" . $id . ")"; ?>'>
                <i class="fa fa-folder  tx-29"></i> 
                <?php echo $value['name']; ?>
                <i class="fas fa-caret-down ms-1"></i>
        </span>
        <div class = "dropdown-menu tx-13" id = "get_data_dropdown_<?php echo $_id; ?>">
        </div>
    </li>

we used the javascript function to call the backend using ajax.

function get_data(id) {
    $.post("ajax/get_data.php", {id: id,}, function (data) {
        $("#results").html(data);

    });
}

the returned data from the ajax call is a result of foreach with a link.

    <a class="dropdown-item" onclick="get_classification(
        <?php echo $tbl_level_id; ?>,
        <?php echo $tbl_org_id; ?>,
        <?php echo $tbl_classin_id; ?>,
        <i class="fa fa-info-circle"></i> 
        <?php echo $value['name']; ?>
    </a>

when we go to a link of these data returned I put them in an empty div

<div id="results"> </div>

so when we get the data we put it there.

now these data contain another link, when I click on any of these links/buttons, The dropdown stills exists and the data in it still exists, but it is no longer working.

I hope I explained It well.

Answer 1

I actually found an answer.

What happened is that I was adding a function to handle the problem before as it solved the issue, but after time it didn't longer work, I removed that function since I didn't need it.

<script>
    $(function () {
            //This function fixes the issue dropdown button doesn't open in a new page..
            $('li>[data-bs-toggle="dropdown"]').each(function () {
                $(this).click(function () {
                    if (!$(this).hasClass("show") && $(this).attr("aria-expanded") === "false") {
                        $(this).next().addClass("show");
                        $(this).attr("aria-expanded", "true");
                        $(this).addClass("show");
                    } else {
                        $(this).next().removeClass("show");
                        $(this).attr("aria-expanded", "false");
                        $(this).removeClass("show");
                    }
                })
            })
        }
    )
</script>