JS没有执行

Question

我在下面的网站上找到了这段代码片段，css 和 html 工作正常，但无论我在哪里编写代码，js 都无法正常工作。我已经在内联、内部和外部尝试过它，但它不起作用。我也尝试过不同的浏览器，如 firefox、opera，我使用 phpstorm 作为我的 IDE:

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="probe.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="/jquery-ui-1.12.1/jquery-ui.js"></script>
<title>Probe!</title>
</head>
<body>
    <div class="holder">

        <div class="bar">
            <p style="float:left"> Hello world</p>
            <a href="#" style="float:right" class="delete"> remove </a>
        </div>
        <div class="bar2">
            <p style="float:left"> Hello world</p>
            <a href="#" style="float:right" class="delete"> remove </a>
        </div>


    </div>


    <a href="#" class="add">+ Add 1</a>
    <a href="#" class="add2">+ Add 2</a>
    <script src="probe.js"></script>
</body>
</html>

js 文件 (probe.js)

$( ".holder" ).sortable();
$( ".holder" ).disableSelection();
var c1 = c2 = 0;
$('.add').click(function() {
   $(".bar:last")
   .after('<div class="bar"><p style="float:left"> Hello world ' + c1 + '</p> <a href="#" style="float:right" class="delete"> remove </a></div>');
   c1++;
});

$('.add2').click(function() {
     $(".bar2:last")
     .after('<div class="bar2"><p style="float:left"> Hello world ' + c2 + '</p> <a href="#" style="float:right" class="delete"> remove </a></div>');
     c2++;
});

$('.delete').click(function() {
     $(this).parent().remove();
});

css-文件:

.bar{
     background:#ccc;
     width:400px;
     height:30px;
     margin-bottom:2px;
}

.bar a, .bar p{
     display:block;
     margin:0px;
     padding:0px;
}

.bar2{
     background:red;
     width:400px;
     height:30px;
     margin-bottom:2px;
}

.bar2 a, .bar2 p{
     display:block;
     margin:0px;
     padding:0px;
}

在此网站上：https://jsfiddle.net/jnLfh/17

Answer 1

jQuery 代码需要等到 DOM 就绪后才能执行。看来你并没有这样做。

jQuery 文档 document.ready()

Answer 2

您似乎在使用 jQuery 1.10.1 和 jQuery UI 1.10.4。我建议使用更现代的版本。

示例：https://jsfiddle.net/Twisty/xmaktcy4/9/

JavaScript

$(function() {
  $(".holder").sortable();
  $(".holder").disableSelection();

  var c1 = c2 = 0;

  $('.add').click(function() {
    var item = '<div class="bar"><p style="float:left"> Hello world ' + c1 + '</p> <a href="#" style="float:right" class="delete"> remove </a></div>';
    if ($(".bar").length) {
      $(".bar:last").after(item);
    } else {
      $(".holder").append(item);
    }
    c1++;
  });

  $('.add2').click(function() {
    var item = '<div class="bar2"><p style="float:left"> Hello world ' + c2 + '</p> <a href="#" style="float:right" class="delete"> remove </a></div>';
    if ($(".bar2").length) {
      $(".bar2:last").after(item);
    } else {
      $(".holder").append(item);
    }
    c2++;
  });

  $('.holder').on("click", ".delete", function(e) {
    $(this).parent().remove();
  });
});

JS没有执行

JS is not executing

javascript

jquery

jquery-ui