如何在按钮单击的帮助下重新加载特定的 DIV 元素？答案

【问题标题】：How to reload a specific DIV Element with the help of button click?如何在按钮单击的帮助下重新加载特定的 DIV 元素？
【发布时间】：2020-01-10 12:36:31
【问题描述】：

我的 HTML 代码中有 3 个组件。 2 个 DIV 标签和 1 个按钮。我希望在单击按钮时重新加载第一个 DIV 标记。我已经应用了 jQuery，但单击按钮时没有发生任何事情。这是我嵌入了 JS 代码的 HTML 代码。

<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!--Font Awesome Icons-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <title>DIV Load Testing</title>

</head>

<body>

    <button id="reloader" type="button" class="btn btn-primary btn-sm">
        <i class="fas fa-chevron-circle-left"></i> Reload
    </button>
    <!--DIV TAG TO BE RELOADED ON THE BUTTON CLICK-->
    <div class="container" id="content">
        <h1>Reloads</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

        <img src="colorizer-desktop.PNG">

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
<!---->

    <div class="container">
        <h1>Test</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <img src="image-desktop.PNG">
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            $('#reloader').click(function(){
               // alert('ok');
                $('#content').load(' #content');
            });
        });

        //function myButton() {
        //    location.reload();
        // }
    </script>
</body>

</html>

我使用了 2 个场景：

借助 jQuery。
借助location.reload(); 函数。

通过location.reload() 函数，整个页面正在重新加载，但我只希望在单击按钮时重新加载第一个 DIV 标记。

请在此功能方面提供帮助！

【问题讨论】：

div 重载是什么意思？
那么您希望reload 做什么？
重新加载一个 div 元素是什么意思？
为什么要加载不同的 jQuery 版本.. Bootstrap 的 JavaScript 至少需要 jQuery v1.9.1..
DIV重载是指通过点击@MayankPatel按钮刷新DIV元素的内容

标签： javascript jquery html jquery-ui dom-events

【解决方案1】：

来自jQuery .load()：

.load() 方法与$.get() 不同，它允许我们指定要插入的远程文档的一部分。这是通过 url 参数的特殊语法实现的。如果字符串中包含一个或多个空格字符，则字符串中第一个空格之后的部分被假定为确定要加载的内容的 jQuery 选择器。

我们可以修改上面的示例以仅使用获取的文档的一部分：

$( "#result" ).load( "ajax/test.html #container" );

当这个方法执行时，它会检索ajax/test.html 的内容，然后jQuery 会解析返回的文档以找到ID 为容器的元素。此元素及其内容被插入到 ID 为 result 的元素中，而检索到的文档的其余部分将被丢弃。

jQuery 使用浏览器的.innerHTML 属性来解析检索到的文档并将其插入到当前文档中。在此过程中，浏览器通常会从文档中过滤出<html>、<title> 或<head> 等元素。因此，.load() 检索到的元素可能与浏览器直接检索到的文档并不完全相同。

所以你的脚本应该是这样的：

$(function() {
  $('#reloader').click(function() {
    var self = window.location.href;
    console.log("Loading '#content' from " + self);
    $('#content').load(self + ' #content');
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="reloader" type="button" class="btn btn-primary btn-sm"><i class="fas fa-chevron-circle-left"></i> Reload</button>
<div class="container" id="content">
  <h1>Reloads</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

  <img src="colorizer-desktop.PNG">

  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

注意：此 sn-p 在此环境中不起作用，需要在您自己的代码中进行测试。

【讨论】：

嗨@Twisty 感谢您的回答。请让我知道我必须在哪里编写
@Dipanshu 这是您将<script> 内容存储在头部或底部的选择。

【解决方案2】：

我不知道“重新加载 div”是什么意思。你预计会发生什么？

除此之外，jQuery .load() 函数用于从服务器加载远程文件并显示其内容。您需要告诉函数它必须加载哪个文件：

$('#content').load('sample.html');

因此，如果您的带有 Javascript 函数的 html 文件名为 index.html，您的调用将是：

$('#content').load('index.html #content');

这将告诉您的函数它必须从文件 index.html 加载 div #content。

【讨论】：

嗨@toneyt 感谢您的评论。 “重新加载 div”只是意味着通过单击按钮刷新或重新加载 div 元素的内容，而不刷新或重新加载整个页面。我已经包含了您提到的 index.html 文件，但 DIV 元素没有重新加载或刷新。谢谢！！
好吧，如果您的 div 在加载页面和单击按钮之间没有变化，那么 div 可能已经重新加载，但您不会看到任何差异。