浏览器不会反映 JS 文件的变化答案

【问题标题】：Browser won't reflect changes in JS files浏览器不会反映 JS 文件的变化
【发布时间】：2019-02-25 01:30:41
【问题描述】：

我最近正在学习如何托管本地 Web 服务器，最近我一直在处理一个非常令人沮丧的问题。我的浏览器可以看到我在 HTML 和 CSS 文件中所做的更改，但它根本不会响应我的 JS 文件。它们都在 index.js、index.html 和 main.css 下的同一个文件夹中。当我什至无法判断我正在做的事情是否有效时，我感到非常沮丧和难以练习。有没有人看到我的代码有任何问题可以解释这一点？我禁用了缓存，所以我知道不是这样。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Shopping List</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="container">
        <h1>Shopping List</h1>

        <form id="js-shopping-list-form">
            <label for="shopping-list-entry">Add an item</label>
            <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
            <button type="submit">Add item</button>
        </form>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="index.js"></script>
</body>
</html>

JS：

'use strict';
/* global $ */

function addItem(){
  $('input').prop('required');
  $('#js-shopping-list-form').submit(event => {
    event.preventDefault(); 
    const userTextElement = $(event.currentTarget).find('#shopping-list-entry');

  helpAdd(userTextElement.val());
});
}

function checkItem(){
  $('.shopping-list').on('click', '.shopping-item-toggle', event => {
  event.preventDefault();   
});
}

function deleteItem(){
  $('.shopping-list').on('click', '.shopping-item-delete', event => {
  event.preventDefault();       
});
}

function helpCheck(item) {
  if($(item.closest('li')).find('>:first-child').attr('class') === 'shopping- 
  item shopping-item__checked')
  {
  $(item.closest('li')).find('>:first-child').attr('class','shopping-item');
  }   
 else{
 $(item.closest('li')).find('>:first-child').attr('class','shopping-item 
 shopping-item__checked');
 }
}

function helpAdd(itemName){
  $( '.shopping-list').append(` <li>
  <span class="shopping-item">${itemName}</span>
  <div class="shopping-item-controls">
  <button class="shopping-item-toggle">
    <span class="button-label">check</span>
  </button>
  <button class="shopping-item-delete">
    <span class="button-label">delete</span>
  </button>
 </div>
</li>`);
}

$(addItem);
$(checkItem);
$(deleteItem);

【问题讨论】：

确保清除缓存，然后重新加载页面
你用的是什么浏览器？您是否尝试过 Shift 单击刷新按钮？"
努力刷新页面，control + shift + r
我正在使用 Chrome。是的，我有，再多的刷新也无法解决任何问题。有时如果我完全关闭页面并重新打开它，它会起作用，但大多数时候它不起作用。
“我最近在学习如何托管本地 Web 服务器”您使用的是什么 Web 服务器，它是否在缓存您的 JS 文件？

标签： javascript jquery html css

【解决方案1】：

您似乎缺少我刚刚添加为<ul class="shopping-list"></ul> 的“购物清单”类元素

请试试这个代码

'use strict';
/* global $ */

function addItem() {
    $('input').prop('required');
    $('#js-shopping-list-form').submit(event => {
        event.preventDefault();
        const userTextElement = $(event.currentTarget).find('#shopping-list-entry');

        helpAdd(userTextElement.val());
    });
}

function checkItem() {
    $('.shopping-list').on('click', '.shopping-item-toggle', event => {
        event.preventDefault();
    });
}

function deleteItem() {
    $('.shopping-list').on('click', '.shopping-item-delete', event => {
        event.preventDefault();
    });
}

function helpCheck(item) {
    if ($(item.closest('li')).find('>:first-child').attr('class') === 'shopping-item shopping - item__checked')
    {
        $(item.closest('li')).find('>:first-child').attr('class', 'shopping-item');
    }   
 else {
        $(item.closest('li')).find('>:first-child').attr('class', 'shopping-item shopping - item__checked');
 }
}

function helpAdd(itemName) {
    $('.shopping-list').append(` <li>
  <span class="shopping-item">${itemName}</span>
  <div class="shopping-item-controls">
  <button class="shopping-item-toggle">
    <span class="button-label">check</span>
  </button>
  <button class="shopping-item-delete">
    <span class="button-label">delete</span>
  </button>
 </div>
</li>`);
}

$(addItem);
$(checkItem);
$(deleteItem);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <h1>Shopping List</h1>

    <form id="js-shopping-list-form">
        <label for="shopping-list-entry">Add an item</label>
        <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
        <button type="submit">Add item</button>
    </form>

    <ul class="shopping-list"></ul>
</div>

【讨论】：

【解决方案2】：

如果您使用的是 chrome：转至DevTools(F12) > Network tab > mark Disable cache

然后刷新浏览器并打开DevTools 窗口。

【讨论】：