实现手风琴动态加载div的问题

Question

我正致力于实现动态加载div的手风琴。问题是具有此脚本的脚本文件＆amp; 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.

正如您在图片中看到的那样，当我打开＆amp;关闭the accordian它的空。问题是：

萤火虫代码类似于

所以我不确定之前div是如何关闭的。请参阅jquery脚本＆amp;我正在使用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

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

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