使用 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 之间切换并在面板中显示内容。单击 "Back" link 时，面板会显示原始项目列表。

 $(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，所以该事件只会发生一次。要在元素上绑定点击事件，即使它被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 内容时，具有与之关联的点击事件的 DOM 元素会获取覆盖。

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

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

使用 Jquery 更改 DOM 个元素

Changing DOM elements with Jquery

javascript

jquery

panel

twitter-bootstrap-3