jquery无法隐藏附加的div答案

【问题标题】：jquery unable to hide appended divjquery无法隐藏附加的div
【发布时间】：2014-02-23 10:55:57
【问题描述】：

我正在尝试将 div 附加到网站的正文，然后在用户使用 jquery 单击关闭按钮时将其向左滑动来隐藏它。该站点当前使用 Drupal 7，因此无法直接编辑文件。我正在使用 Optimizely 来应用它。

我还需要合并内联样式，除非有一种简单的方法可以使用 jquery 设置所有这些样式。我知道，有大量的 div，但它只能在这个网站上使用这些类按此顺序应用。

我需要附加一串 div，所以我目前正在这样做：

$("body").append("<div id=\"faceboxwrap\">
<div id=\"facebox\" style=\"height:500px; width:320px; z-index:99999; position:fixed; margin-left:0px; bottom:20px; background-image:url(..);\">
<div class=\"action-link field-name-field-fa-link\" style=\"float:left; margin-top:360px; padding-right: 10px; \">
<div class=\"field field-name-field-shared-splash-link field-type-link-field field-label-hidden\" style=\"width: 175px; margin-left: 103px; margin-right: auto; top: 38px; background-color: rgb(204, 51, 51); \">
<div class=\"field-items\">
<div class=\"field-item even\">
<a href=\"...\" id=\"trackDonate\" style=\"padding-right: 10px;\">DONATE $10</a>
</div></div></div>\n
<div style=\"text-align: center; width: 100%; color: rgb(121, 121, 121); font-size: 13px; margin-top: 60px; margin-left: 115px;\">
<button id=\"close\" style=\"font-weight: bold; font-size: 14px; cursor: pointer; text-transform: lowercase; cursor: hand;\"> No thanks </button>
</div></div></div></div>");

我对 jquery 的经验绝对为零，那么有没有一种简单的方法可以将此代码附加到我的页面正文中，然后通过向左滑动来隐藏整个 faceboxwrap div？四个多小时以来，我一直在尝试用我能找到的每一个技巧来做到这一点，但我无法让它发挥作用。任何帮助都会很棒。谢谢。

编辑：更新了 id。

【问题讨论】：

#faceboxwrap有什么风格？
无，所以从技术上讲，这个 div 可以删除。其余的 div 如果不包含内联样式，则通过样式表附加样式。

标签： jquery function html append hide

【解决方案1】：

<script type="text/javascript">
    $(document).ready(function() {
        $("#closeButtonId").on("click", function() {
            $("#faceboxwrap").hide();
        });
    });
</script>

这应该可以解决您的问题。

hide 和 on 方法文档。

编辑：由于按钮是使用 div 创建的，因此这是另一种可能有效的解决方案：

<button id=\"close\" style=\"font-weight: bold; font-size: 14px; cursor: pointer; text-transform: lowercase; cursor: hand;\" onclick=\"$('#faceboxwrap').hide();\">No thanks</button>

这是有效的fiddle。

另一个工作的fiddle。

现在 fiddle 可以满足您的所有需求，通过将 div 移到左侧来隐藏它。不过，您需要 jQuery UI 来实现该行为。

如果您需要在 DOM 加载后创建的元素上绑定事件，我认为在不影响 JS 代码的情况下绑定该事件是不可能的。我不是百分百肯定，但我认为不可能。

【讨论】：

我不这么认为，因为您没有将点击事件附加到这些 div，而是附加到了一个已经存在的元素。
检查这个fiddle 看看是否有帮助。
不，按钮实际上包含在这些div中<button id=\"close\" style=\"font-weight: bold; font-size: 14px; cursor: pointer; text-transform: lowercase; cursor: hand;\"> No thanks </button>您知道其他解决方案吗？
哦，我现在明白了。我认为在不干扰 JS 代码的情况下附加事件是不可能的。我不确定，但我会用一些可能有用的东西来编辑我的答案。
不幸的是，编辑也不起作用。谢谢你的帮助，我很感激你的努力

【解决方案2】：

我不确定我是否理解这个问题，但您可以使用这样的动画功能将 div 向左滑动：

$("#faceboxwrap").animate({left: newLeft});

我假设你希望它离开屏幕，因为它是一个固定位置，你可以设置

newLeft = $("#faceboxwrap").width() * -1

【讨论】：