xxxxxxxxxx1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<meta name="viewport" content="width=device-width, initial-scale=1.0">6
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>7
</head>8
<body>9
10
11
<div id="content">12
<div class="dropdown">13
<button14
class="btn btn-primary dropdown-toggle"15
type="button"16
id="dropdownMenuButton"17
aria-expanded="false"18
>19
Dropdown button20
</button>21
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">22
<li><a class="dropdown-item" href="#">Action</a></li>23
<li><a class="dropdown-item" href="#">Another action</a></li>24
<li><a class="dropdown-item" href="#">Something else here</a></li>25
</ul>26
</div>27
</div>28
29
30
31
32
33
<br><br>34
<button onClick="initDropdown()">35
Init dropdown36
</button>37
38
<button onClick="reloadContent()">39
Reload content40
</button>41
42
43
</body>44
</html>1
1
xxxxxxxxxx1
function initDropdown() { 2
console.log('init dropdown');3
console.log($('#content .dropdown-toggle').get(0));4
5
mdb.Dropdown.getOrCreateInstance($('#content .dropdown-toggle').get(0), {6
display: 'static',7
dropdownAnimation: 'on'8
}); 9
} 10
11
12
function reloadContent() {13
var contentHtml = `<div class="dropdown">14
<button15
class="btn btn-primary dropdown-toggle"16
type="button"17
id="dropdownMenuButton"18
aria-expanded="false"19
>20
Dropdown button21
</button>22
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">23
<li><a class="dropdown-item" href="#">Action</a></li>24
<li><a class="dropdown-item" href="#">Another action</a></li>25
<li><a class="dropdown-item" href="#">Something else here</a></li>26
</ul>27
</div>`;28
29
$('#content').html(contentHtml); 30
}31
32
Console errors: 0