jQuery可排序标签点击事件不工作

jQuery sortable label click event is not working

本文关键字：事件 工作 排序 标签 jQuery      更新时间：2023-09-26

我创建了一个列表，用于对几个城市进行排序，并使用jQuery-ui插件进行可拖动排序。问题是排序正在工作，但当我尝试序列化值时，它什么也不做，当我检查Chrome开发工具时，我看到以下错误:

ERROR: Uncaught ERROR:不能调用sortable上的方法初始化;试图调用方法"serialize"jquery-1.8.3.min.js: 487

v.extend。jquery-ui- 1.10.1.1 .custom.min.js:6 v.extend.each jquery-1.8.3.min.js:536jquery-1.8.3.min.js:416(匿名函数)jquery-ui- 1.10.1.1 .custom.min.js:6(匿名函数.event.dispatch jquery-1.8.3.min.js:1141jquery-1.8.3.min.js: 1061

PHP/HTML代码: 

<div class="row-fluid" id="sortable_portlets">
      <div class="span4 column sortable">
        <!-- BEGIN Portlet PORTLET-->
        <?php
        $lisres = mysql_query("SELECT `cityid`, `name`, `cityodr` FROM `tbl_city`");
        $count = 1;
        while ($resrow = mysql_fetch_array($lisres)) {
            $ctynme = $resrow['name'];
            $ctyid = $resrow['cityid'];
            if ($count < 10) {
                $sp = "0";
            } else {
                $sp = "";
            }
            ?>
            <label class="portlet" id="drag_<?php echo $ctyid; ?>">
                    <?php
                echo $sp;
                echo $count . " " . $ctynme;
                ?>
                </label>
            <?php
            $count = $count + 1;
        }
        ?>
        </div>
    </div>
    <div id="rush">
    </div>

脚本代码:

    $("label").click(function() {
        var sorted = $("label").sortable("serialize", {key: "drag"});
            $.post("scripts/check.php", {dash: sorted}, function(data) {
                var res = data;
                $("#rush").html(res);
            });
    });

我找到了答案。不能同时选择子元素作为容器和可排序元素。感谢大家的时间和努力。以下是完整的答案:

试试这个。如果它不工作，请更新小提琴。

$( document ).ready(function() {
        $("label").click(function() {
            var sorted = $("label").sortable("serialize", {key: "drag"});
                $.post("scripts/check.php", {dash: sorted}, function(data) {
                    var res = data;
                    $("#rush").html(res);
                });
        });
    });
相关文章：