Javascript 使用jQuery仅在动态插入某个div时显示隐藏的div

我有一个隐藏的div，我只想在某个div通过AJAX动态插入DOM时显示它

因此，代码设置如下：

<div>
    <div>hello</div>
    <div class="test">hello2</div>  <-- Class (.test) gets inserted dynamically. Initially it won't be there.
    <div>hello3</div>
</div>
<div class="hidden" style="display:none">hidden content here</div> 

然而，这不起作用。什么都不会改变。代码有问题吗

编辑：AJAX代码

// Poll Process Successfully
function poll_process_success(data) {
        jQuery(document).ready(function($) {
                //$('#polls-' + poll_id).replaceWith(data);

         var html ='<div class="first-block vote-submitted"><h2>Thanks for your vote!</h2></div><form id="poll_qst_form" class="second-block comment-block">';
                     html = html+'<input type="text" name="name" id="poll_name" placeholder="Your name" required>' ;
             <!--html = html+'<input type="email" name="email" id="poll_email" placeholder="Your email" required>' ;-->
             html = html+'<textarea name="comment" id="poll_comment" class="text poll_comment" placeholder="Let Kina and Ken know your feedback and questions!" required></textarea>' ;
             html = html+'<input type="button" class="Buttons" onclick="send_comment()" id="com_bnt" value="send">';
             html = html+'</form>' ;
         $('#polls-' + poll_id).replaceWith(html);


                if(pollsL10n.show_loading) {
                        $('#polls-' + poll_id + '-loading').hide();
                }
                if(pollsL10n.show_fading) {
                        $('#polls-' + poll_id).fadeTo('def', 1);
                        set_is_being_voted(false);
                } else {
                        set_is_being_voted(false);
                }
        });
}

//轮询过程成功
函数轮询\u过程\u成功（数据）{
jQuery（文档）.ready（函数（$）{
//$（“#polls-”+poll_id）.replace为（数据）；
var html='谢谢你的投票！'；
html=html+“”；
html=html+“”；
html=html+“”；
html=html+“”；
$（'#polls-'+poll_id）.replacetwith（html）；
如果（轮询10n.显示加载）{
$（“#polls-”+poll#u id+“-加载”）.hide（）；
}
如果（轮询10n.显示衰落）{
$（“#polls-”+poll_id）.fadeTo（'def'，1）；
set\u正在被投票（false）；
}否则{
set\u正在被投票（false）；
}
});
}

更新1:

由于div是动态加载的，因此需要挂接到Ajax代码中并在该点上运行

   $.ajax({
      // Your ajax settings here
   }).done(function(){
        if ($('div.test').length) {
            $('.hidden').insertAfter( $( '.test' ) ).show();
        }
   });

备选方案：

您还可以挂接到全局Ajax完成处理程序（在每次Ajax加载后激发）：

或者使用计时器定期（例如，本例中为1秒）检查变化

setInterval(function(){
     if ($('div.test').length) {
         $('.hidden').insertAfter( $( '.test' ) ).show();
     }
 }, 1000);

其他问题。

DOM就绪处理程序应如下所示：

$(function() {
    if ($('div.test').length) {
        $('.hidden').insertAfter( $( '.test' ) ).show();
    }
});

还是长篇大论

$(document).ready(function(){
    if ($('div.test').length) {
        $('.hidden').insertAfter( $( '.test' ) ).show();
    }
});

注意：在

hasClass

中也不指定前导“.”，因为它假定它是类名

---

注意：您不需要

hasClass

，因为您只需检查jQuery选择器结果的长度，在这种情况下，任何带有

class=“test”

的div都可以，例如使用

div.test

更新1:

由于div是动态加载的，因此需要挂接到Ajax代码中并在该点上运行

   $.ajax({
      // Your ajax settings here
   }).done(function(){
        if ($('div.test').length) {
            $('.hidden').insertAfter( $( '.test' ) ).show();
        }
   });

备选方案：

您还可以挂接到全局Ajax完成处理程序（在每次Ajax加载后激发）：

或者使用计时器定期（例如，本例中为1秒）检查变化

setInterval(function(){
     if ($('div.test').length) {
         $('.hidden').insertAfter( $( '.test' ) ).show();
     }
 }, 1000);

其他问题。

DOM就绪处理程序应如下所示：

$(function() {
    if ($('div.test').length) {
        $('.hidden').insertAfter( $( '.test' ) ).show();
    }
});

还是长篇大论

$(document).ready(function(){
    if ($('div.test').length) {
        $('.hidden').insertAfter( $( '.test' ) ).show();
    }
});

注意：在

hasClass

中也不指定前导“.”，因为它假定它是类名

注意：您不需要使用

hasClass

，因为您只需检查jQuery选择器结果的长度，在这种情况下，任何带有

class=“test”

的div都可以使用

div.test

• 它应该是

  $（document）.ready

  ，而不是

  $。ready

• 它应该是

  hasClass（'test'）

  ，而不是

  hasClass（'.test'）

更正代码：

• 它应该是

  $（document）.ready

  ，而不是

  $。ready

• 它应该是

  hasClass（'test'）

  ，而不是

  hasClass（'.test'）

更正代码：

---

只需更改以下代码：

$.ready(function() {
    if ($('div').hasClass('.test')) {
        $('.hidden').insertAfter( $( '.test' ) ).show();
    }
});

到

---

只需更改以下代码：

$.ready(function() {
    if ($('div').hasClass('.test')) {
        $('.hidden').insertAfter( $( '.test' ) ).show();
    }
});

到

试试看

试一试

---

如果按照@TrueBlueAussies的回答，您无法访问ajax代码，那么您可以听一些类似的内容

更新

不推荐使用突变事件，应改用突变观察服务器

---

如果按照@TrueBlueAussies的回答，您无法访问ajax代码，那么您可以听一些类似的声音

更新

不推荐使用突变事件，应改用突变观察服务器

---

---

你能摆弄一下吗？你的代码只在DOM就绪时运行一次，以后再也不会运行了。稍后将加载动态内容。您在问题中说您正在动态添加div，并且正在添加

p

tag？该ready函数无效（您需要设置处理程序）。另外，jQuery无法侦听这样的动态创建的元素，您可能需要使用插件或自定义事件，当您创建不应该是

$.ready

的内容时触发该事件。改为使用此快捷方式

$（function（）{YOUR code HERE}）。你能做点什么吗？你的代码只在DOM就绪时运行一次，以后不会再运行了。稍后将加载动态内容。您在问题中说您正在动态添加div，并且正在添加
p
tag？该ready函数无效（您需要设置处理程序）。另外，jQuery无法侦听这样的动态创建的元素，您可能需要使用插件或自定义事件，当您创建不应该是
$.ready
的内容时触发该事件。改为使用此快捷方式
$（function（）{YOUR code HERE}）。很抱歉造成混淆。
.test
类通过AJAX动态添加。所以一开始，这个类不会出现。我尝试了你的代码，但它没有影响任何东西。当前的答案都无助于动态加载。。。会很快更新的是的，我也试过其他的。谢谢你的帮助。我现在正在试用你更新的代码，但是我有点困惑，我需要为ajax设置设置什么。我看到了设置列表，但我只是想移动一个div，这样我需要插入哪些设置？如果您显示加载该div的现有Ajax代码，就会容易得多：）很抱歉造成混淆。
.test
类通过AJAX动态添加。所以一开始，这个类不会出现。我尝试了你的代码，但它没有影响任何东西。当前的答案都无助于动态加载。。。会很快更新的是的，我也试过其他的。谢谢你的帮助。我现在正在试用你更新的代码，但是我有点搞不清楚我需要什么设置
$(document).bind('DOMNodeInserted', function(e) {
    if($('.test').length) {
        $('.hidden').show();
    }
});