javascript - 使用 Jquery 更改 DOM 元素

Question

我有一个如下所示的 Bootstrap 面板:

  <div class="col-md-4 col-sm-6">
            <div class="panel panel-default ">
                <div class="panel-heading"><a href="#" class="pull-right" id="back">Back</a> <h4>Title 1</h4>
                </div>
                <div class="panel-body pre-scrollable">
                    <div id="data">
                        <div id="info">
                            <div class="list">Item 1
                                <div class="hidden">This is the rest of the data</div>
                            </div>
                            <div class="list">Item 2
                                <div class="hidden">This is the rest of the data</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>    

我使用此 javascript 在列表项和子 div 之间切换并在面板中显示内容。单击“返回”链接时，面板会显示原始项目列表。

 $(document).on("ready", function(){/* jQuery toggle layout */

   $( "#info .list" ).on('click' , function() {
     window.data = $("#info").html();
     var htmlString = $( this ).find('div.hidden').html();

     $( "#info" ).html( htmlString );

   });

   $( "#back" ).on('click',  function() {
     console.log(window.data);
     $( "#info" ).html( window.data ); 
   });
 });

一切都工作正常，除了它只能工作一次，然后我必须刷新页面才能再次工作。

我在这里缺少什么？

这是一个工作示例:

http://www.bootply.com/y84ZiHTQ5W

Answer 1

由于您正在使用 javascript 操作 dom，因此该事件只会运行一次。要在元素上绑定(bind)单击事件，即使它被 js 更改，您应该使用事件委托(delegate)技术，该技术具有一些相同的语法:

    $("#info").on('click', ".list", function() {
      window.data = $("#info").html();
      var htmlString = $(this).find('div.hidden').html();

      $("#info").html(htmlString);
    });

    $(document).on("click","#back", function() {
      console.log(window.data);
      $("#info").html(window.data);
    });

您也可以将 $("#info") 更改为:$(document), $("body")。