javascript - 如何在ajax调用过滤后使项目可拖动

Question

所以我得到了一个可拖动的名称列表。我有一个复选框列表，可以帮助他们过滤这些名称。选中复选框后，我进行 ajax 调用。这是我的列表的样子(它是一个 Accordion ):

        <div id="myAccordion">
        <?php
                echo "<h3>Names</h3>";  
                echo '<ul class="source">';
                echo '<div id="getData"></div>';    
                echo '<div id="hideData">'; 
                $sql = "SELECT * FROM user ORDER BY `username` ASC ";
                $result = $conn->query($sql);       
                if ($result->num_rows > 0) 
                {
                    // output data of each row
                    while($row = $result->fetch_assoc()) 
                    {  
                        $name = $row["username"];
                        $user_type = $row["user_type"];
                        echo"<li class='item'><span class='closer'>x</span>".$name."</li>";                     
                    }
                    }
                    else 
                    {
                        echo "0 results";
                    }   
                echo '</div>';                      
                echo '</ul>';
        ?>  
        </div>

因此，在调用 ajax 后，我调用 filter.php 并打印该内容:

<?php
require_once('inc/database_connection.php');
include 'model/model.project.php';
if($_POST['user_type'])
{
    //unserialize to jquery serialize variable value
    $type=array();

    parse_str($_POST['user_type'],$type); //changing string into array 

    //split 1st array elements
    foreach($type as $ids)
    {
        $ids;
    }
    $types=implode("','",$ids); //change into comma separated value to sub array
    echo "<br>";
    $result = getUserTypeChecked($types);
?>
    <div id="getData">
    <?php 
    while($rows=mysqli_fetch_array($result))
    {                   
        //echo $rows['username']."<br>";  
        $name = $rows["username"];
        echo '<ul id="source">';
        echo"<li class='item'><span class='closer'>x</span>".$name."<div class='green'></div></li>";    
        echo '</ul>';

    }       
    ?>  
    </div>
<?php
}
?>

所以问题是 ajax 调用后名称不再可拖动。我怎样才能实现这个目标？

编辑

好的，这是我的 Accordion js:

<script>
    $("#myAccordion").accordion({heightStyle:"content", collapsible:true});
    $("#myAccordion li ").draggable({
        appendTo: "body",
        helper: "clone",
         refreshPositions: true,
         start: function (event, ui) {
            sourceElement = $(this);
        },          
    });
</script>

和 ajax 调用:

<script>
$(document).ready(function(){
    //$('#getData').hide();
    $('.ids').on('change',function(){ //on checkboxes check
        //sending checkbox value into serialize form
        var hi=$('.ids:checked').serialize();
        if(hi){
            $.ajax({
                type: "POST",
                cache: false,
                url: "filter.php",
                data:{user_type:hi},
                success: function(response){
                    //$('#getData').show();
                    document.getElementById('getData').style.display = "block";
                    document.getElementById("getData").innerHTML = response;
                    $('#hideData').hide();
                }
            });
        }
        else
        {
            document.getElementById('getData').style.display = "none";
            $('#hideData').show();
        }
    });
});
</script>

Answer 1

JS 与页面上加载的 DOM 一起工作。这意味着当您调用排序函数时，页面上必须存在 HTML 元素。

让我们尝试了解这里发生了什么？

• 首先加载所有 html 元素。
• JS 触发器和所有拖动功能到加载的 DOM。
• 调用 Ajax 来获取新数据并替换旧 DOM。
• 现在拖动功能停止工作。
• 为什么？因为JS拖动功能运行在旧的DOM上，目前已被删除。
• 需要在新加载的 DOM 上再次调用拖动函数。

注意:确保在调用 JS 拖动函数之前必须加载元素或 HTML。