使用Jquery更改DOM元素

Changing DOM elements with Jquery

本文关键字：元素 DOM 更改 Jquery 使用      更新时间：2023-09-26

我有一个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

因为您使用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")。

它只在第一次工作的原因是，当您设置#info-div的html内容时，与之相关联的点击事件的DOM元素会被覆盖。

为了让它发挥作用，你需要在写入#infodiv的内容后重新添加点击事件处理程序

$( "#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);
}
相关文章：