Question

当您点击显示qtip时，会有一个锚标记。 qtip是动态生成的。

<a class="change-zip" href="#zip-change-tooltip">something</a>

/ *这是动态加载的* /

<div class="qtip">
 <div class="content">
   <div id="zip-change-tooltip">
     *content is here*
   </div>
 </div>
</div>

现在我正在使用这个

$(document.body).on('click','.change-zip',function(){

        $('#zip-change-tooltip').parents('.qtip').css('height','200px');
});

它首先不起作用，但是当我第二次点击它时它工作得很好，因为DOM已经加载了。我该怎么做才能让它发挥作用？

提前致谢。

Answer 1

jquery中没有任何内容称为

$(document.body)

你会收到错误..只需使用

$(document)

或

$(document).ready(function(){
// your code here after document is ready
});

或使用

$(document).on('click','.change-zip',function(){

        $('#zip-change-tooltip').parent().parent().css('height','200px');
});

Answer 2

我怀疑你看到了一个样式问题，我把你的代码放到JSBin中并且它有效： http://jsbin.com/tumogaxahi/1/

如果您编辑该JS bin，则这是正在使用的代码。它与您提供的一些基本CSS基本相同，因此您可以看到高度变化。我在添加点击处理程序后附加了更改zip锚标记，以证明委派的处理程序正在运行。

<style>
.qtip {
  width: 100px;
  height: 100px;
  background: blue;
}

a {
  color: #fff;
}

.change-zip {
  display: block;
  width: 100px;
  text-align: center;
  padding: 10px 0;
}

</style>

<div class="qtip">
 <div class="content">
   <div id="zip-change-tooltip">

   </div>
 </div>
</div>

<script>
$(document.body).on('click', '.change-zip', function() {
    $('#zip-change-tooltip').parents('.qtip').css('height','200px');
});

$('#zip-change-tooltip').html('<a class="change-zip" href="#zip-change-tooltip">something</a>');
</script>

您是否检查过devtools中的qtip以查看是否正在应用内联样式？如果是，也许有一个CSS规则覆盖内联样式 - ！CSS规则中的重要内容将覆盖JS应用的内联样式。

只是旁注 - $（document.body）完全有效 - 它只是围绕document.body表示的dom节点创建一个jQuery对象。它与$（＆＃39; body＆＃39;）实际上相同，但使用原生document.body是一个更快的选择器，因为它不必使用jQuery的选择器引擎。

Answer 3

我想出了怎么做。我基本上在我的函数上添加了100的setTimeout，所以它会在延迟后执行。这将有助于DOM首先加载，然后在其上应用css。谢谢你们的时间。

$(document.body).on('click','.change-zip',function(){
        setTimeout(function(){
        $('#zip-change-tooltip').parents('.qtip').css('height','200px');    
        },100);

    });

延迟太短，很难注意到css的变化。它就像一个魅力。

我不能通过Jquery在动态加载的内容上应用CSS。

3 个答案: