jQuery - 如何在页面加载时隐藏的元素内添加 fadeOut() 按钮？

发布于 2024-11-26 15:06:23 字数 751 浏览 1 评论 0原文

我有两个简单的脚本，第一个在单击时显示一个 div。该 div 内部有一个关闭按钮（非常基本的模式窗口）。 qrTooltip div默认隐藏，display:none。我可以让它显示正常，但关闭功能不起作用。我假设这是因为当页面加载 jQuery 来完成它的事情时，标记必须存在，并且因为 div 是隐藏的，所以它永远不会将 jQuery 代码添加到锚点。

有什么简单的方法可以解决这个问题吗？

<script language="javascript">
$('#btnQr').click(function() {
    $('#qrTooltip').fadeToggle('fast', function () {
    // Animation complete
  });
});
</script>

   <script language="javascript">
    $('#btnQrClose').click(function() {
        $('#qrTooltip').fadeOut('fast', function () {
        // Animation complete
      });
    });
    </script>

<a href="#" id="btnQr">show</a>


<div id="qrTooltip">
<a href="#" id="btnQrClose">hide</a>
</div>

原文

I have two simple scripts, the first shows a div when clicked. Inside that div is a close button (very basic modal window). The qrTooltip div is hidden by default, with display:none. I can get it to show fine, but the close function doesn't work. I am assuming this is because the markup has to be present when the page loads for jQuery to do it's thing, and because the div is hidden it never adds the jQuery code to the anchor.

Is there any simple way around this?

<script language="javascript">
$('#btnQr').click(function() {
    $('#qrTooltip').fadeToggle('fast', function () {
    // Animation complete
  });
});
</script>

   <script language="javascript">
    $('#btnQrClose').click(function() {
        $('#qrTooltip').fadeOut('fast', function () {
        // Animation complete
      });
    });
    </script>

<a href="#" id="btnQr">show</a>


<div id="qrTooltip">
<a href="#" id="btnQrClose">hide</a>
</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

流年里的时光 2024-12-03 15:06:23

这是因为您的 Javascript 在按钮存在之前就已被评估。尝试这样的事情：

<script language="javascript">
$(function(){
   $('#btnQrClose').click(function() {
       $('#qrTooltip').fadeOut('fast', function () {
           // Animation complete
       });
    });
});
</script>

It's because your Javascript is being evaluated before the button exists. Try something like this:

<script language="javascript">
$(function(){
   $('#btnQrClose').click(function() {
       $('#qrTooltip').fadeOut('fast', function () {
           // Animation complete
       });
    });
});
</script>

回复收藏 0 原文