遇到一个关于调用javascript语句不起作用的问题

今天遇到一个需求，就是在页面的sidebar/左侧有一个下拉菜单，菜单有三级，前两级点击的时候会弹出下一级的菜单，最后一级点击的时候页面内容部分/右侧会展现相应的文章内容。

因为不想在每一次点击最后一级菜单的时候都去数据库读取数据或者是用ajax读取数据，所以在页面一加载的时候就已经把每个小菜单对应的文章内容也获取到了。
我的思路就是，每篇文章跟在每一个小菜单，然后用隐藏div隐藏起来，每个隐藏div都有个属性，这个属性就是小菜单的id值。当点击每一个小菜单的时候，用javascript获取到这个菜单的id值，然后获取到对应id的隐藏div里面的所有内容，然后把内容放到右侧那里。
其实如果只是点击左侧小菜单，右侧就显示相应的文章内容，是比较好实现的，只要小菜单和隐藏div都有对应相同的属性值，就能调用。例如如下代码所示：

<li class="list-group-item dropdown clearfix" sid="li_{$voco['id']}">
                            <a href="javascript:void(0);" name="show_div" sid="sd_{$voco['id']}">
                            <i class="fa fa-circle"></i> 
                            {$voco['title']}
                            </a>
                            <div style="display:none;" id="div_{$voco['id']}">

如图中代码所示，我给a标签（小菜单）和div（隐藏div）都设置了一个同样包含有id值的属性，想要点击左侧的小菜单，右侧就显示相应的内容，代码如下：

<script type="text/javascript">
      $("[name='show_div']").click(function(){
        //先要去除所有红色，
        $("[name='show_div']").parent().removeClass('active');

        var val = $(this).attr('sid'); 
        val = val.substr(3);        

        //点击对应的优惠，sidebar上的li元素是active，即为红色，
        $("[sid='li_"+val+"']").addClass('active');


        //选择相应的优惠内容在页面上
        val = "div_" + val;
        var html = document.getElementById(val).innerHTML;//alert(html);
        document.getElementById('showdiv').innerHTML = html;

这里用到innerHTML，先用innerHTML获得隐藏div里面的内容，再把这个内容赋值给右侧的内容展示区域。

如果问题到这里的话应该就简单了，但是现在还有一个需求，就是在右侧显示的文章内容里面会有几篇文章的标题，而用户点击文章标题就可以看到相应的文章了，然后我就想，那可以啊，只要给那几个文章标题都加上和小菜单一样的属性值，那么点击这几个文章标题的时候，同样获取到这个属性值，再获取到这个属性值对应的内容后覆盖到右侧内容，就可以了。

所以我就如法炮制，但是发现一个问题，点击那几个文章标题根本没有反应，就是说我对那几个文章标题写的js语句根本不起反应，这是为什么呢？我打开浏览器，按F12调试，然后输入js语句，终于让我发现了问题所在，那就是如果点击左侧菜单，弹出内容后，在浏览器调试栏输入js语句，点击内容里面的文章标题，js语句起作用了；但是我点击了文章标题之后，再一次弹出来的内容里面也包含了文章标题，我点击，没反应，说明js语句只运行了一次，而我们的需求逻辑是对文章标题做作用的js语句必须时刻运行，所以我想到了每点击一次文章标题，就要重新生成一次js语句，就是要把对文章标题作用的js语句写到一个函数里面，并且不断循环调用，代码如下：

$("[name='show_ss']").click(function(){
            var pp = $(this).attr('sid');
            pp = pp.substr(3);
            pp = "div_" + pp;
            var html = document.getElementById(pp).innerHTML;
            document.getElementById('showdiv').innerHTML = html;
            if (true) {
              bb();
            }
        });
        function bb(){
          $("[name='show_ss']").click(function(){
              var pp = $(this).attr('sid');
              pp = pp.substr(3);
              pp = "div_" + pp;
              var html = document.getElementById(pp).innerHTML;
              document.getElementById('showdiv').innerHTML = html;
              bb();
          });
        }

感觉个人对于js只理解了一点点，还是要从根本去理解，这样写语句的时候才能更明白如何符合脉络逻辑去编写。