div 高度变化时发出警报

Question

我整天都在寻找这个，但我自己无法弄清楚..

我有一个购物车，您可以在其中添加商品。购物车位于下拉列表中，因此您必须单击它才能查看它。因此，每次您将商品添加到购物车时，我都想在某处显示“+1”、“+2”等，当您单击下拉菜单时，它会消失，因此它可以重新开始计数。 所以，我认为当 div 的高度发生变化时，它可以显示 +1。

但是，我不知道足够的 javascript 来做到这一点......

我的html：

<div id="button">Button</div>
  <div id="chartdropupcontainer">
    <div id="chart">
      <button>test</button>
<script type="text/javascript">
$("button").click(function () {
    $("#testp").hide();
});    

$("#chart").bind("resize", function(){ 
    alert("test"); 
});
</script>
      <p id="testp"></p>
    </div>
  </div>
</div>

我的 CSS：

* {
 padding: 0;
 margin: 0;
 font-family: Helvetica;
 color: white;
}

#chartdropupcontainer {
 width: 200px;
 background-color: red;
 position: fixed;
 bottom: 0;
 right: 0;
 margin-right: 20px;
 padding: 0 5px 0 5px;
 margin-bottom: 47px;
 z-index: 998;
}
#chartdropupcontainer h1 {
 margin: 5px;
 color: black;
 cursor: pointer;
}
#chart {
 width: 100%;
 background-color: black;
 height: 400px;
 overflow: auto;

}
#button {
 background-color: blue;
 cursor: pointer;
 padding: 10px;
 width: 190px;
 position: fixed;
 bottom: 0;
 right: 0;
 margin-right: 20px;
 z-index: 999;
}

我的javascript：

$(document).ready(function() {
    $("#button").click(function () {
      $("#chartdropupcontainer").slideToggle("slow");
    });
});

这里是一个在线版本的链接：http://www.rutgerinc.nl/niels/

编辑：对不起，有点不礼貌！ 谁能帮我解决这个问题？

Answer 1

首先，resize 事件发生在您调整窗口大小时，这就是您的事件永远不会触发的原因。 http://api.jquery.com/resize/

我认为您需要更改将项目添加到购物篮的代码。是不是有更多的 javascript 可以在一开始就将东西添加到购物篮中？

像 BGerrissen 建议的事件驱动方法将是完美的，因为您可以在用户向购物车添加东西时触发一个或多个独立函数。

当您使用 jQuery 时，自定义事件非常简单。您使用触发器触发事件​​，然后绑定以侦听它。 http://api.jquery.com/trigger/