css - 在为动态加载 div 实现 Accordion 时遇到问题

Question

我正在致力于实现一个用于动态加载 div 的 Accordion 。问题是具有此脚本和 html 编码的脚本文件是异步加载的。

  $("#leftNavBusinessCounts").append('<div class="SearchDetails"><strong> One-Stop Services  </strong><br></br>View Centers by specific services.</div>');
        $("#leftNavBusinessCounts").append('<div class="sliding-drawer one-stop-details"><h2>Business Services</h2><div>');
        $(xml).find('FilterSection').eq(2).find("FilterItem").each(function() {
             $("#leftNavBusinessCounts").append('<div>HI</div>');
          });
        $("#leftNavBusinessCounts").append('</div></div>');//this is closing even before the <div>HI</div> is loaded ,so its outside.

正如您在图片中看到的那样，当我打开和关闭 Accordion 时，这些值出现在 Accordion 之外。问题是:

firebug 代码类似于

所以我不确定之前div是如何关闭的。请查看我正在使用的 jquery 脚本和 css:

<style type="text/css">
    .one-stop-details h2 { 
        display: block; 
        padding: 10px 0px 10px 30px; 
        background-image: url('/COSImages/expanding_section_background_closed.png'); 
        background-position: right; 
        border: 2px solid #ededed; 
        -moz-border-radius: 8px; 
        border-radius: 8px; 
        cursor: pointer; 
        margin: 0px;
    }

    div.sliding-drawer { 
        margin: 10px 0px 10px 0px; 
    }

    .sliding-drawer div {
         display: none; 
         padding: 5px;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        $('.sliding-drawer h2').click(function () {
            $(this).parent().children('.sliding-drawer div').slideToggle('slow');
            if ($(this).css("background-image").indexOf('/COSImages/expanding_section_background_closed.png') == -1) {
                $(this).css("background-image", "url('/COSImages/expanding_section_background_closed.png')");
            }
            else {
                $(this).css("background-image", "url('/COSImages/expanding_section_background_open.png')");
            }
        });
    });

</script>

我错过了什么重要的东西吗？谢谢。

Answer 1

尝试 live()对于动态生成的元素的 click 事件

$('.sliding-drawer h2').live('click',function () {