从 class 调用 jQuery function 从 ajax 返回 html

Question

我正在尝试在我的页面上使用 jquery 和 ajax。我有 ajax 调用返回的 HTML 代码

function GetList() {
                $.ajax({
                    url: "/List.asmx/List1",
                    type: "GET",
                    dataType: "json",
                    data: {
                    },
                    contentType: "application/Json; Charset= Utf-8",
                    success: function (data) {
                        var list = "";
                        $.each(data.d, function (index, item) {
                            list += '<div itemid=' + item.Nu + ' class="btn btn-default box">' + item.Name + '</div>';
                        });
                        $("#container1").html(list);
                    },
                    error: function (response) {
                        alert(response);
                    }
                });
            }

在这个 HTML 里面，我有一个 class 他的名字 'box' 和这个 function jquery 要使用的盒子

$('.box').draggable({
                    cursor: 'move',
                    helper: "clone"
                });

这个 class 的问题没有被 jquery 使用，有人有什么建议吗？

Answer 1

问题是可拖动的 function 仅适用于 DOM 元素，不适用于动态创建的元素。

可以在AJAX done中重新调用draggable function来解决问题。

function GetList() {
            $.ajax({
                url: "/List.asmx/List1",
                type: "GET",
                dataType: "json",
                data: {
                },
                contentType: "application/Json; Charset= Utf-8",
                success: function (data) {
                    var list = "";
                    $.each(data.d, function (index, item) {
                        list += '<div itemid=' + item.Nu + ' class="btn btn-default box">' + item.Name + '</div>';
                    });
                    $("#container1").html(list);
                },
                done: function (response) {
                    $('#container1 .box').draggable({
                        cursor: 'move',
                        helper: "clone"
                    });
                },
                error: function (response) {
                    alert(response);
                }
            });
        }