TypeError:未定义不是函数(用于jQuery sortables)

Question

我正在创建一个"房间"的HTML UI，您可以将设备放在这些房间中。我使用jQuery可排序的小部件。我使用此代码来设置我的分类：

function setupSortables() {
        $(".sortableHorizontal")
        .sortable({
            connectWith: ".sortableHorizontal",
            cancel: ".unsortable",
            revert: animationSpeed,
            "placeholder": 'sortPlaceholder',  
            "opacity": 0.5,
                "start": function (event, ui) {
                    var $item = ui.item;
                    $(".sortPlaceholder").css({
                        "margin-top": $(".deviceContainer").css("margin-top"),
                        "margin-left": $(".deviceContainer").css("margin-left"),
                        "height": $(".deviceContainer").height() - ($(".sortPlaceholder").css("border-width").replace(/[^-d.]/g, '') * 2) + "px",
                    });
                },  
                "stop": function(event, ui) {
                        //alert(ui.item.parent().attr("id"));
                    updateRoomDimensions();
                    relocateSmarthomeObject(ui.item);
                }
        })
        .disableSelection()
        .css({
            "min-height": $(".deviceContainer").outerHeight(true),
            "min-width": $(".deviceContainer").outerWidth(true),
            "padding-right": "15px"
        });
    }

我在 $(document).ready()上称此方法为此，因为我已经有之前存在的房间。但是，当我使用此代码创建新房间时：

function createRoom() {
        var roomName = $("#roomCreator").find("#name").val();
        var roomColor = $("#roomCreator").find("#color").text();
        $.get("/devices/createRoom", {
            "name": roomName,
            "color": roomColor
        }, function(data, status) {
            $("#notif").html(data);
            $("#responses").html(data);
            var ssid = $("#responses").find("#SSID").val();
            if(ssid != null) {
                var html = "
                    <li id='" + ssid + "' class='root_sortItem'> 
                        <div class='invisible'> 
                            <div class='invisible roomContainerContainer'> 
                                <div id='r_" + ssid + "' class='roomContainer' style='background-color:" + roomColor + ";'> 
                                    <div id='r_" + ssid + "_nameContainer' class='textBigBold roomHeader'> 
                                        <span id='r_" + ssid + "_name'>" + roomName + "</span> 
                                        <div class='overlay'> 
                                            <img class='move'/> 
                                            <img class='edit'/> 
                                        </div> 
                                    </div> 
                                    <ul id='" + ssid + "' class='sortableHorizontal room_sort' style='width:165px; height:198px; border:solid 1px blue;'> 
                                    </ul> 
                                </div> 
                            </div> 
                        </div> 
                    </li> ";
                var $html = $(html);
                $("#root_sort").append($html);
                $(document).ready(function() {
                    setupSortables();
                });
            }
        });
        closeRoomCreator();
    }

并调用第一个 setupSortables（）方法，它返回：

TypeError: undefined is not a function (near '...$(".sortableHorizontal")
        .sortable...')

我在做什么错？

Answer 1

我建议更新以使用jQuery对象而不是HTML字符串。

示例：https：//jsfiddle.net/twisty/pto4bke0/3/

javascript

var animationSpeed = "fast";
function setupSortables() {
  $(".sortableHorizontal")
    .sortable({
      connectWith: ".sortableHorizontal",
      cancel: ".unsortable",
      revert: animationSpeed,
      placeholder: 'sortPlaceholder',
      opacity: 0.5,
      start: function(event, ui) {
        var $item = ui.item;
        $(".sortPlaceholder").css({
          "margin-top": $(".deviceContainer").css("margin-top"),
          "margin-left": $(".deviceContainer").css("margin-left"),
          "height": $(".deviceContainer").height() - ($(".sortPlaceholder").css("border-width").replace(/[^-d.]/g, '') * 2) + "px",
        });
      },
      "stop": function(event, ui) {
        //alert(ui.item.parent().attr("id"));
        //updateRoomDimensions();
        //relocateSmarthomeObject(ui.item);
      }
    })
    .disableSelection()
    .css({
      "min-height": $(".deviceContainer").outerHeight(true),
      "min-width": $(".deviceContainer").outerWidth(true),
      "padding-right": "15px"
    });
}
function createRoom() {
  var roomName = $("#roomCreator").find("#name").val();
  var roomColor = $("#roomCreator").find("#color").val();
  var ssid = 1000 + $(".root_sortItem").length;
  if (ssid != null) {
    var $li = $("<li>", {
      id: ssid,
      class: "root_sortItem"
    });
    $("<div>", {
      class: "invisible"
    }).appendTo($li);
    $("<div>", {
      class: "invisible roomContainerContainer"
    }).appendTo($li.find(".invisible"));
    $("<div>", {
      id: "r_" + ssid,
      class: "roomContainer",
      style: "background-color: " + roomColor + ";"
    }).appendTo($li.find(".roomContainerContainer"));
    $("<div>", {
      id: "r_" + ssid + "_nameContainer",
      class: "textBigGold roomHeader"
    }).appendTo($li.find(".roomContainer"));
    $("<span>", {
      id: "r_" + ssid + "_name"
    }).html(roomName).appendTo($li.find(".roomHeader"));
    $("<div>", {
      class: "overlay"
    }).appendTo($li.find(".roomHeader"));
    $("<img>", {
      class: "move"
    }).appendTo($li.find(".overlay"));
    $("<img>", {
      class: "edit"
    }).appendTo($li.find(".overlay"));
    $("<ul>", {
      id: "rs_" + ssid,
      class: "sortableHorizontal room_sort",
      style: "width:165px; height:198px; border:solid 1px blue;"
    }).appendTo($li.find(".roomContainer"));
    $("#root .sortableHorizontal").eq(0).append($li);
  }
}
$(function() {
  setupSortables();
  $("#createRoomBtn").click(createRoom);
});

我不得不做一些猜测，因为您没有提供一个非常完整的例子。