Jquery Sortable 不会在更新时发出警报 "order"

标签 jquery jquery-ui jquery-ui-sortable

这应该是直接的,但是我在提醒可排序列表的顺序时遇到了真正的麻烦。

这是我正在使用的 JQuery 代码:

$(document).ready(function() {
    $("#projectItems").sortable({
        update : function(event, ui) {
            var order = $(this).sortable('toArray').toString();
            alert(order);

        }
    });
});

这是我的列表的 HTML:

<ul id="projectItems">
                    <li id="item1" value="<?php echo $studentChoice1; ?>">(1) <?php echo $title[1]; ?><a href='#message1' onclick='deleteProject(".$studentChoice1.",".$userID.")'><img height=20px width=20px alt='Delete' src='img/delete.png' /></a></li>
                    <li id="item2" value="<?php echo $studentChoice2; ?>">(2) <?php echo $title[2]; ?><a href='#message1' onclick='deleteProject(".$studentChoice2.",".$userID.")'><img height=20px width=20px alt='Delete' src='img/delete.png' /></a></li>
                    <li id="item3" value="<?php echo $studentChoice3; ?>">(3) <?php echo $title[3]; ?><a href='#message1' onclick='deleteProject(".$studentChoice3.",".$userID.")'><img height=20px width=20px alt='Delete' src='img/delete.png' /></a></li>
                    <li id="item4" value="<?php echo $studentChoice4; ?>">(4) <?php echo $title[4]; ?><a href='#message1' onclick='deleteProject(".$studentChoice4.",".$userID.")'><img height=20px width=20px alt='Delete' src='img/delete.png' /></a></li>
                    <li id="item5" value="<?php echo $studentChoice5; ?>">(5) <?php echo $title[5]; ?><a href='#message1' onclick='deleteProject(".$studentChoice5.",".$userID.")'><img height=20px width=20px alt='Delete' src='img/delete.png' /></a></li>
</ul>

该列表是可排序的并且可以工作,但是当用户完成对项目的排序时,它根本不显示警报消息。

如果我能提供任何帮助,我将不胜感激,因为我已经被这个问题困扰了几天,而且似乎无法在网上找到解决方案。

更新 问题似乎出在引用 jQuery

我当前使用的 jQuery 版本是 1.7.1,来自 google 的 CDN,在我的脚本中引用如下:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

但是当我将其更改为:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

根本没用!

此外,当我尝试像下面这样的引用时,它说存在 jquery 引用错误!

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" href="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" href="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

我不知道如何解决这个问题,因为它似乎对其其他人来说都工作得很好! 如有任何帮助,我们将不胜感激。

最佳答案

工作正常,请在此处查看:http://jsfiddle.net/DHJb7/

$(document).ready(function() {
$("#projectItems").sortable({
    update : function(event, ui) {
        var order = $(this).sortable('toArray').toString();
        alert(order);
    }
});
});

我认为您忘记包含 jQuery 或 jQueryUI 库。 如果您已包含它们,请检查库的版本。

推荐版本: jQuery 1.9.1 和 jQueryUI 1.9.2

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" href="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" href="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

关于Jquery Sortable 不会在更新时发出警报 "order",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15111957/

相关文章:

jquery - 沿日期和时间滚动的 Javascript slider

android - jQuery UI Touch Punch 不适用于 Android 设备上的 Chrome 和 Opera

javascript - 使用 jQueryUI 对多个选定项目进行排序

javascript - 如何检查日期时间?

javascript - 使用 jquery 切换当前类

javascript - jQuery Ready 和带参数的 jQuery Ready 简写之间的区别?

javascript - 为什么 jQuery 的 .data 方法会这样? (可能的错误?)

javascript - jQuery 异或选择器

javascript - 如何更改jQuery UI自动完成控件的建议框的大小和外观?

javascript - 将内部 Accordion 创建为空 Accordion