在数据表中隐藏动态创建的 DIV答案

【问题标题】：Hiding dynamically created DIV inside datatable在数据表中隐藏动态创建的 DIV
【发布时间】：2017-05-24 17:55:16
【问题描述】：

所以我创建了一个带有 DIV 的数据表，我想在页面加载时隐藏它。这是div：

<div class="user" id="userinfo_46"><b>Name: </b>benjy corpuz<br><b>Phone Number: </b>N/A<br><b>Alternate Phone Number: </b><br><b>Email: </b>N/A<br><b>Best Time To Reach: </b>anytime<br><b>Location: </b>new yrork, NY<br><b>Case Description: </b>confidential<br></div>

我确实试过这个：

$('.user').hide();

还有这个：

$(document).on("pageload", ".user",function(){
    $(this).hide();
});

但什么都没有。不确定在加载时是否有其他隐藏方式，不能使用点击等。

这是用户 Hodrobond 的一个 Jfiddle，这很好地说明了问题：

https://jsfiddle.net/fcpambdm/

我得到的答案似乎不明白该元素是动态的，因此它不能像常规元素一样隐藏。

【问题讨论】：

页面加载时DOM中是否存在div，还是在页面加载后创建的？尝试在$('.user').hide() 调用上设置断点，然后查看检查$(".user") 时会得到什么
Here 是一个 jsfiddle，展示了您的问题的可能简化案例。 1.页面加载完毕。 2. 具有“用户”类的元素被隐藏。 3. 动态创建的表被创建（包括“user”类的元素）。
@Hodrobond 我会将此添加到我的问题中，完全正确您所取得的成就。这正是问题所在。我已经通过点击或其他方式完成了此操作，但不确定页面加载事件。
问题本质上是“隐藏发生在元素存在之前”，解决方案可能会沿着“元素存在之后隐藏”的路线，所以我们问“它什么时候存在？”。动态元素创建是否有任何回调？这可能是最优雅的解决方案。
@Hodrobond 检查我的答案，很简单。但是感谢您的帮助，您得到了问题的要旨。你提到的回调让我想到了解决方案 thx :)

标签： javascript jquery html css

【解决方案1】：

你可以添加属性

style="display:none"

给您的 div 元素用户。

【讨论】：

【解决方案2】：

动态添加内容的工作解决方案（只是为了演示目的添加了延迟）。另请注意，如果我们打算使用delay，则需要使用hide(0) explanation：

$(function() {
  $('.user').append('<b>Name: </b>benjy corpuz<br><b>Phone Number: </b>N/A<br><b>Alternate Phone Number: </b><br><b>Email: </b>N/A<br><b>Best Time To Reach: </b>anytime<br><b>Location: </b>new yrork, NY<br><b>Case Description: </b>confidential<br>').delay(1000).hide(0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="user" id="userinfo_46">
</div>

注意：$(document).ready(function(){}) 的简写是 $(function(){})。等效的 javascript 是 $(document).ready(function(){})

【讨论】：

这不是解决方案。如果您无法重现问题并提供解决方案，请将其作为评论留在 OP 上。
@himanshu 它必须位于数据表中，而不仅仅是纯 HTML。需要动态创建DIV。
我了解，但 OP 没有提供任何代码，我使用了 jQuery DomReady。 @JCLopez 我明白了，我会在修复后立即更新。

【解决方案3】：

完全刚刚找到答案，比我们想象的要简单。

<div class="user" style="display:none" id="userinfo_46"><b>Name: </b>benjy corpuz
<br><b>Phone Number: </b>N/A
<br><b>Alternate Phone Number: </b>
<br><b>Email: </b>N/A
<br><b>Best Time To Reach: </b>anytime
<br><b>Location: </b>new yrork, NY
<br><b>Case Description: </b>confidential
<br>
</div>

刚刚将 style="display:none" 添加到 div 中，一旦数据表加载该列，它将隐藏。简单:)

【讨论】：

【解决方案4】：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
//Detects whether the DOM is ready..
$(document).ready(function(){
  //if ready, then run the ff lines..
  // ........
  //Hides the selected div container with class ".user"
   $(".user").hide();
});
</script>

<div class="user" id="userinfo_46"><b>Name: </b>benjy corpuz
  <br><b>Phone Number: </b>N/A
  <br><b>Alternate Phone Number: </b>
  <br><b>Email: </b>N/A
  <br><b>Best Time To Reach: </b>anytime
  <br><b>Location: </b>new yrork, NY
  <br><b>Case Description: </b>confidential
  <br>
</div>

【讨论】：