JS不会在页面中执行(在jsfiddle中工作）

JS won't execute in page (works in jsfiddle)

本文关键字：jsfiddle 执行 工作 JS      更新时间：2023-09-26

我首先想说的是，我对JavaScript和Jquery非常陌生，所以希望这是一个简单的问题，

我有一些JS代码来排列几个div标签的顺序，这些标签在JSfiddle（http://jsfiddle.net/databass/Yh2L3/）中工作

但是当我尝试将其放入网页时，没有任何反应

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Testing</title>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
$('button').on('click', function (event) {
var divElements = $('#tours div'),
    sortType = $(this).data('sort');
divElements.sort(function (a, b) {
    a = $(a).data(sortType);
    b = $(b).data(sortType);
// compare
    if (a > b) {
        return 1;
    } else if (a < b) {
        return -1;
    } else {
        return 0;
    }
});
$('#tours').empty();
$.each(divElements, function (i, divElement) {
    $('#tours').append(divElement.outerHTML);
});
});
  </script>
</head>
<body>
<button data-sort='price'>Sort By Price</button>
<button data-sort='duration'>Sort By Duration</button>
<button data-sort='name'>Sort By Name</button>
<section id="tours">
<div class="result" data-price="749" data-duration="8" data-name="Basecamp">Info about tour 1 goes here</div>
<div class="result" data-price="2099" data-duration="19" data-name="Cycle Adventure">Info about tour 2 goes here</div>
<div class="result" data-price="1099" data-duration="25" data-name="Family Adventure">Info about tour 3 goes here</div>
<div class="result" data-price="3014" data-duration="18" data-name="Luxury Basecamp">Info about tour 4 goes here</div>
</section>
</body>
</html>

非常感谢您的帮助

在将

元素添加到 DOM 之前执行的javascript代码。您需要将javascript代码放在body结束标记之前或document.ready中。

传递给 .ready（） 的处理程序保证在 DOM 已准备就绪，因此这通常是附加所有其他内容的最佳位置 事件处理程序并运行其他jQuery代码，jQuery文档

相关文章：