Question

这是我的问题，我在jsfiddle中放了一段代码，它完美无缺。我在我的网站上放了相同的代码，显然在标题中添加了jquery和jquery UI（直接链接到jquery站点，不在本地托管这些文件），代码不起作用。

我试图在此项目中获得“可排序”效果。它不仅仅是这个代码。它的每一段代码都有使用jquery的可拖动，可移动等。我错过了一些东西，甚至无法想到它是什么。

我拥有数据中心中的服务器，并且它们正在运行cPanel，因此如果我需要进行更改，我可以完全访问服务器本身。

当我在jsfiddle上测试代码时，当我点击并拖动

标签时，它不会突出显示文本并移动<li>标签，允许我重新排序列表。在我的网站上，它开始突出显示文本，并没有实际移动文件。两个地方的所有HTML都完全相同。

有什么想法吗？

代码:(某些代码仍然存在与我的PHP代码交互;但是，删除了此示例的所有php代码以进行测试）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
<script type="text/javascript">
/* when the DOM is ready */
jQuery(document).ready(function() {
    /* grab important elements */
    var sortInput = jQuery('#sort_order');
    var submit = jQuery('#autoSubmit');
    var messageBox = jQuery('#message-box');
    var list = jQuery('#sortable-list');
    /* create requesting function to avoid duplicate code */
    var request = function() {
        jQuery.ajax({
            beforeSend: function() {
                messageBox.text('Updating the sort order in the database.');
            },
            complete: function() {
                messageBox.text('Database has been updated.');
            },
            data: 'sort_order=' + sortInput[0].value + '&ajax=' + submit[0].checked + '&do_submit=1&byajax=1', //need [0]?
            type: 'post',
            url: '<?php echo $_SERVER["REQUEST_URI"]; ?>'
        });
    };
    /* worker function */
    var fnSubmit = function(save) {
        var sortOrder = [];
        list.children('li').each(function(){
            sortOrder.push(jQuery(this).data('id'));
        });
        sortInput.val(sortOrder.join(','));
        console.log(sortInput.val());
        if(save) {
            request();
        }
    };
    /* store values */
    list.children('li').each(function() {
        var li = jQuery(this);
        li.data('id',li.attr('title')).attr('title','');
    });
    /* sortables */
    list.sortable({
        opacity: 0.7,
        update: function() {
            fnSubmit(submit[0].checked);
        }
    });
    list.disableSelection();
    /* ajax form submission */
    jQuery('#dd-form').bind('submit',function(e) {
        if(e) e.preventDefault();
        fnSubmit(true);
    });
});
</script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>

<body>

<ul id="sortable-list">
<li title="1">Item 1</li>
<li title="2">Item 2</li>
<li title="3">Item 3</li>
<li title="4">Item 4</li>
</ul>

Answer 1

您有两个开场脚本标记：

<script type="text/javascript">
<script type="text/javascript">
/* when the DOM is ready */
jQuery(document).ready(function() {

第二个被视为JavaScript代码，无法解析。您应该在开发工具控制台中收到错误;例如，Chrome说Uncaught SyntaxError: Unexpected token <

要修复它，只需删除其中一个。（它适用于jsFiddle，因为你没有粘贴脚本标签。）

jsfiddle与活动服务器上的代码（活动服务器上的代码无法正常工作）

1 个答案: