无法使用 Flask 访问更新的 AJAX jQuery 引导下拉列表

Question

我是jQuery和Flask的新手，我试图用AJAX请求更新我的下拉菜单。

我的下拉列表如下：

<div class="btn-group btn-group-toggle" data-toggle="buttons">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle"  id="b_btncontrollers" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Regler
</button>
<div class="dropdown-menu" id="c_btncontrollers" name="btncontrollers" aria-labelledby="dropdownMenuButton">
{% for control in controllers %}
<a class="dropdown-item" name="controllers" id={{ control }} value={{ control }} href="#"> {{ control }} </a>
{% endfor %}
</div>
</div>
</div>

我从Python程序中转移了一个列表，以生成一个下拉列表，显示列表中的单个元素。这很好，但如果我尝试更新下拉列表，我就无法访问列表中的新项目。在我的AJAX请求中，我这样做：

$.ajax({
method: "POST",
dataType: "json",
contentType: "application/json",
url: "/updateNavBar",
data: JSON.stringify($(this).attr("value"))
}).done(function (data) {

for (var control in data['controllers']) {
$("#btncontrollers").append('<a class="dropdown-item" name="controllers" value=' + data['controllers'][control] + ' id=' + data['controllers'][control] + ' href = "#" > ' + data['controllers'][control] + ' </a > ');
}

这也很好用。在我的Dom Explorer中，新元素已经存在。为了显示所选项目，我使用这样的脚本：

$(function () {
$("#c_btncontrollers a").click(function () {
console.log("Sollte aktualisieren")
$("#b_btncontrollers:first-child").text($(this).text());
$("#b_btncontrollers:first-child").val($(this).text());
});
});

如果不更新所有内容，效果会很好，但如果我将新项目放在下拉列表中，我就无法访问这些新项目。我不知道问题出在哪里。也许你们中的某个人知道问题出在哪里。我使用的是Python版本3.7、Bootstrap版本4.3.1和jQuery版本3.4.1

编辑：

新项目显示在下拉列表中，但我无法选择它们。

Answer 1

点击处理程序不起作用的问题是因为您使用点击处理程序中的选择器在特定元素上创建了这些处理程序：

$("#c_btncontrollers a").click(function () {...}

但是jQuery为您提供了使用选择器在任何项目上查找点击的方法，无论它们在设置处理程序时是否存在。基本上，您可以在整个文档中添加一个点击处理程序，然后查看点击目标，看看它是否正确。

jQuery多年来以几种不同的方式完成了这项工作，但由于您使用的是jQuery 1.7或更高版本，它的工作原理如下：

$(function () {
$(document).on("click", "#c_btncontrollers a", function() {
console.log("Sollte aktualisieren")
$("#b_btncontrollers:first-child").text($(this).text());
$("#b_btncontrollers:first-child").val($(this).text());
});
});

一种更古老的方法可能仍然有效：

$(function () {
$("#c_btncontrollers a").live("click", function() {
console.log("Sollte aktualisieren")
$("#b_btncontrollers:first-child").text($(this).text());
$("#b_btncontrollers:first-child").val($(this).text());
});
});

希望这能有所帮助！

Answer 2

我认为问题可能只是在您的append语句中。你遗漏了一些引号。试试这个：

$("#btncontrollers").append('<a class="dropdown-item" name="controllers" value="' + data['controllers'][control] + '" id="' + data['controllers'][control] + '" href = "#" > ' + data['controllers'][control] + ' </a > ');

我所做的只是在value和id属性周围添加双引号。动态添加下拉项应该不是问题。