jquery的点击事件添加了没有效果

Question

<div id="sotr" class="sotr">
            <a data-index='0' style="background: #aa0000;">1</a>
            <a data-index='1' style="background: #005500;">2</a>
            <a data-index='2' style="background: #aa5500;">3</a>
            <a data-index='3' style="background: #59d57f;">4</a>
            <a data-index='4' style="background: #00ffff;">5</a>
            <a data-index='5' style="background: #ff007f;">6</a>
            <a data-index='6' style="background: #ffff7f;">7</a>
            <a data-index='7' style="background: #5500ff;">8</a>
        </div>
        <div id="click" class="click">提交</div>
        <div id="upset" class="upset">打乱</div>

<script>
/////////初始滑动插件
        var foo = document.getElementById("#sotr");
        Sortable.create(foo, {
            group: "adva"
        });


        function shffle() {
            let array = $('#sotr a')
            let usedIndex = []
            let newArray = []
            let validCount = []
            
            top:
                while (validCount < array.length) {
                    let index = Math.floor(Math.random() * array.length)
                    if (usedIndex.indexOf(index) > -1) {
                        continue top
                    } else {
                        usedIndex.push(index)
                    }
                    validCount++
                    newArray.push(array[index])
                }
                let newarr = shuffle()
            for (let item of newarr) {
                $('#sotr').append(item)
            }
        }
        $('#upset').on('upset', shffle())
        
    </script>

只能刷新打乱，按键不能点击

Answer 1

需要做出两步修改

1. script内容需要在window.onload内执行,以确保dom加载完成
2. 监听点击的执行函数的写法是错误的

修改后的完整代码

<script>
        window.onload = function () {
            /////////初始滑动插件
            var foo = document.getElementById("#sotr");
            Sortable.create(foo, {
                group: "adva"
            });


            function shffle() {
                let array = $('#sotr a')
                let usedIndex = []
                let newArray = []
                let validCount = []

                top:
                while (validCount < array.length) {
                    let index = Math.floor(Math.random() * array.length)
                    if (usedIndex.indexOf(index) > -1) {
                        continue top
                    } else {
                        usedIndex.push(index)
                    }
                    validCount++
                    newArray.push(array[index])
                }
                let newarr = shuffle()
                for (let item of newarr) {
                    $('#sotr').append(item)
                }
            }
            $('#upset').on('click', shffle) // 正确写法
        }

    </script>

如有帮助请采纳回答