jQuery-在动态添加的元素上隐藏，显示，添加/删除类

由 发布于 javascriptjqueryhtml
 收藏

So I'm stuck with this project where I have dynamically injected some external HTML into my main document and I want to reference elements that are inside the external document. I'm aware of the on() method, which I have used and it works, but the actions inside the function are not working at all.

作为参考，注入的HTML代码是一个简单的按钮，单击后应隐藏另一个元素。像这样：

<button id="button">Button</button>
<div id="stuff">Stuff</div>

我在JavaScript代码中编写了此代码：

const doc = $(document);

doc.on("click", "#button", function() {
  $('#stuff').hide();
  console.log("You clicked on the button.");
})

The thing is, the console displays the desired message when clicking the button, so I know something is working, but that's it. Other actions don't work. hide(), show(), addClass(), removeClass()... They don't work at all. The console doesn't even throw an error.

我究竟做错了什么？我需要添加一个$（this）吗？我一直在互联网上寻找答案，但无济于事。

谢谢

评论
Bobi
Bobi

hide方法用于jquery导入jquery库

const doc = $(document);

doc.on("click", "#button", function() {
  $('#stuff').hide();
  console.log("You clicked on the button.");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Button</button>
<div id="stuff">Stuff</div>
点赞
评论
占领网吧
占领网吧

您的代码正常工作。也许您没有正确链接jquery脚本。

const doc = $(document);

doc.on("click", "#button", function() {
        $('#stuff').toggle();
        console.log("You clicked on the button.");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Button</button>
<div id="stuff">Stuff</div>
点赞
评论