用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时，该事件将仅运行一次。 要将click事件绑定到元素上，即使它被js更改，也应使用事件委托技术，该语法具有一些相同的语法：

    $("#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") 。

Answer 2

它只能在第一次使用的原因是，当您设置#info div的html内容时，与click事件相关联的DOM元素将被覆盖。

为了使其正常工作，您需要在写入#info div的内容后重新添加click事件处理程序。 像这样：

$( "#info .list" ).on('click' , clickHandler);

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

   $( "#info" ).html( htmlString );
   $( "#info .list" ).on('click' , clickHandler);
}