Question

我有一个带有简单小横幅的网站，只有当某个ajax调用返回某些值时，该横幅才应该弹出一个空元素。

我正在尝试在横幅中包含一个引导按钮，以在单击时隐藏整个div。

可能是因为我没有经验并且不知道更好的方法，所以当ajax数据返回时，我填充div的代码使用jQuery的.html（）方法，只是在字符串中添加了按钮的标记。

因此，在进行一些挖掘之后，我认为我的问题是在第一次加载DOM时加载了用于实际隐藏div的脚本，但是仅在ajax调用之后才添加按钮的标记...因此，< em>之后加载DOM。但是，我不确定，而且我真的不确定如何解决它。

某些代码...

空div，它只是页面最初加载的html的一部分：

<div id="bannerDiv"></div>

该函数的相关部分在ajax调用后触发，填充div并创建关闭按钮：

$("#bannerDiv").html(" /*banner text*/ <button type='button' class='close' id='hidebanner'>&times;</button>");

当单击按钮时应该隐藏div的函数：

$("#hidebanner").click(function () {
            $("#bannerDiv").hide();
        });

请注意（如果需要的话），ajax回调函数和.click都位于页面底部的标记中，并且它们也都包装在$（document）.ready（function（）{}中。

预期结果：小引导程序关闭按钮会隐藏div。

实际结果：单击按钮时什么也没发生-$（“＃hidebanner”）。click（）从未被点击。

任何帮助，不胜感激！

Answer 1

您需要以其他方式添加点击侦听器，使用beta=0.1可以为动态添加的元素（在这种情况下为$(document).on("click",...)）指定侦听器。
button#hidebanner第二个参数是选择器，元素将接收第一个参数（.on()）上指定的侦听器

此外，在函数内部您无需使用"click"查找标语，因为函数上下文是按钮，所以您可以将按钮设为父级并将其隐藏。

看看，这是您需要的吗？

id

function fakeAjaxCallback(){
  console.clear();
  console.log("ajax completed");
  $("#bannerDiv").html(" /*banner text*/ <button type='button' class='close' id='hidebanner'>&times;</button>");
}

$(document).on("click", "#hidebanner", function() {
  $(this).parent().hide();
    console.clear();
  console.log("banner hidden");
});

console.log("fake processing ajax...")
setTimeout(fakeAjaxCallback, 1000);

进一步了解<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="bannerDiv"></div>：https://api.jquery.com/on/

有没有一种方法可以使用jQuery的.html（）方法生成的按钮隐藏<div>？

1 个答案: