Question

是否可以通过点击按钮刷新div而不是自动刷新？一旦我打印#print-container，我想将#print-container刷新到原始状态而不刷新整个页面。

<body onLoad="renderTime();">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-4" id="printarea" >
                <div id="print-container">
                    <div class="item"></div>
                    <div class="total"></div>
                </div>
            </div>
            <div class="col-xs-8">
                <ul class="final">
                    <li class="remove"><a href="#"><input type="submit" value="Remove Last"  class="print-btn remove-item"></a></li>
                    <li class="remove"><a href="#"><input type="submit" value="Refresh" class="print-btn" data-corners="false" id="submit" onclick="refresh()"></a></li>
                </ul>
                <hr />
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="content">
                        <ul class="sub-menu">
                            <li><a href="#"><button class="menu item1">Item 1</button></a></li>
                            <li><a href="#"><button class="menu item2">Item 2</button></a></li>
                        </ul>
                        </div>
        <!--END BEER-->
                </div><!--end box-->
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(".menu a").click(function(e){
            e.preventDefault();
            $(".toggle").hide();
            var toShow = $(this).attr('href');
            $(toShow).fadeIn(5);
        });
    </script>
<script type="text/javascript">

        //add item
        $('.item1').click(function(){
           $('<div class="delete">Item 1 - <span class="skill"> 840</span></div><br />').appendTo('.item');

           counter();
        });
        $('.item2').click(function(){
           $('<div class="delete">Item 2 - <span class="skill"> 910</span></div><br />').appendTo('.item');

           counter();
        });
    </script>

    <script type="text/javascript">

    var counter = function() {

        var total = 0;

        $(".skill").each(function() {

            total += + parseInt($(this).text() , 10);
        });

        $('.total').text('Total: \u0E3F' + total);
    };

</script>

<script type="text/javascript">
    function refresh() {

        setTimeout(function () {
            location.reload()
        }, 100);
    }
</script>

</body>

Answer 1

如果你的div是从外部源加载的（如果它在同一台服务器上是不重要的话）你可以使用jQuery函数 load（）来＆＃34;刷新＆＃34; div。

例如 - 如果您的div从文件 content.html 加载一些内容，那么您可以使用jQuery重新加载div的内容：

$("#button-id").click(function() {
    $("#div-id").load("content.html");
});

就这么简单！

Answer 2

这是一个简单的插件，可以将div内容缓存在自己的属性中，并恢复事件

(function($, window){
  var nodes = $('[reload]');                 // all <div reload=""/> elems
  var serializer = new XMLSerializer();      // serializer
  nodes.each(function(){                     // iterate over all elems
    var domStr = serializer.serializeToString($(this)[0]); //serialize html to str
    $(this).attr('cache', domStr.replace(/\n/g, '')); // remove new-line
    
    $(this).click(function(){                         // event
      $(this).html($(this).attr('cache'));            // restore content of div
    });
  });
  
  // demoPurpose: modify div, add attribute(style), change text
  $('#style').click(function(){
    $(nodes[0]).children().first().css('color', randomColor());
    $(nodes[0]).children().last().css('color', randomColor());
    $(nodes[1]).children().first().css('color', randomColor());
    $(nodes[1]).children().last().css('color', randomColor());
    $(nodes[1]).children().last().text(Date.now());
  });
  
  // demoPurpose: simple random colorizer
  function randomColor(){
    var colors = ['red', 'blue', 'green', 'yellow', 'black', 'pink'];
    return colors[Math.floor(Math.random() * colors.length)];
  }
})(jQuery, window);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div reload="">
  <h1>h1</h1>
  <p>p</p>
</div>

<hr />
<div reload="">
  <h1>another h1</h1>
  <p>with dummy p</p>
</div>

<hr />

<p><button id="style">style</button><small>Click on button to change div</small></p>
<p><small>Click on div to reload it's content</small></p>

虽然看起来很重，但这应该有助于你理解背后的想法

刷新div没有整页刷新？

2 个答案: