Dropdown button stops working when navigate in it using ajax - php

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>